For my RPG game I have this Javascript function that adds keyframes to the header inside a style element. I was going to post my code into this text, but figured I would create a jsFiddle instead! Here it is:
[http://jsfiddle.net/qsdw6n0a/2/][1]
Click around anywhere on the page, and the ball shoots out from my character to where you clicked. This works by using css keyframes, but why is it only working on chrome and not Firefox, or Internet explorer?
Edit: Cannot seem to get the js fiddle to link correctly, hmm.
All your animation properties are prefixed with -webkit-, so they aren't going to work in non-webkit browsers (safari and chrome). Add the non-prefixed versions (animation-name, animation-duration) in addition to the prefixed ones.
Related
Been working on a project and wholly unsurprisingly Safari is throwing a curveball. It's a personal project so I don't really care for browser compatibility but this just bugs me beyond all else.
The project is heavily dependant on the CSS transform property. Safari says it's an "Unsupported property value". Prepending -webkit- doesn't make a difference.
The live project can be found on https://confetti.semhak.dev and the source code on https://github.com/grabbels/jsconfetti/
If you open the live page in modern browsers the expected behaviour happens, confetti flakes are placed randomly outward from the center. In Safari however, Safari doesn't recognize the inline css transform properties.
Example of the inline css being marked as unsupported by Safari:
transform: translate(-202.29527231536557px, -121.38897026273652px) scale(108.7192227372199%, 35.79831998128447%) rotate(301.3939182144637deg)
Note that prepending -webkit- to the transform handle does not seem to help.
Am I just not seeing a blatant mistake or is Safari really this stubborn/broken?
Apparently, Safari can't take percentage values in scale, they have to be decimal. So this should work:
scale(1.087192227372199, 0.3579831998128447)
I'm using the jquery rotate plugin to rotate the text that is on the left #left-menu 90dg.
The plugin is working fine with all browsers except for IE8. I just don't understand why it doesn't loads.
This is what I get with chrome:
And this is what is shown with IE8:
And i'm using this to rotate the text:
$('#left-menu').rotate(90);
It seems IE8 is not loading the plugin, any ideas why?
jQuery rotate has support up to IE6. Plugin site here
Your answer is in the documentation for jQueryRotate.
I try rotate div element and it works everywhere but not in IE.
This plugin was mainly created to rotate images (img) elements ONLY. However it uses CSS attributes in modern browsers that will also work for div elements. That's why it works in other browsers but not IE. If you really need to rotate div you can take a look at experimental version of jQueryRotate 3. You can find it download section.
I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/
I'm using Nirvana Tikku's Jquery Radial Menu Plugin on this page.
The animation works very nicely in IE9, FF, and Chrome. It doesn't work, however, in IE8 or Safari (5). Making matters more challenging, each of these browsers malfunctions in a different way. (Of course, that's not all that surprising.)
In IE8, the curved trapezoids aren't positioning themselves properly by default. Otherwise, the animation works just fine. This leads me to believe the issue has its roots in some quirky, IE8 CSS issue.
Safari, on the other hand, cannot seem to process the Jquery function properly. The menu displays properly initially. However, each click sends the trapezoids scattering.
Only the "keystone" trapezoid displays properly at all times.
I've posted some screenshots here, in case they're helpful: http://dl.dropbox.com/u/9534659/screenshots.zip
Any tips would be most appreciated.
UPDATE (1/25/12)
I have the animation working on all browsers save the Windows version of FF and IE8. (It works fine in the Mac version of FF.)
Any additional suggestions would be most appreciated.
Try to add it to the class .radial_div_item in css this: -webkit-transition:all .1s ease-in-out;
I'm developing a personal website, http://www.miketurley.com.
In any Webkit browser (Chrome, Safari) or Firefox, when you mouse-over the text on my site's opening screen, you get a slick animation which slides the text around and reveals the menu ("waking up" my website.) This may not be too necessary, but I like it and I think it's appropriate to showcase skills like that on my portfolio website.
Anyway, if you go to my website in Internet Explorer, the animations do not appear at all. The same duration of time goes by, and then the page "snaps" into the post-animation state in one frame, with no motion in between.
How can I fix this?
An explanation of this particular animation along with source code is available here: http://www.miketurley.com/index_explain.html
Leaving eval aside, you site is failing to quirks mode in IE. Using dev tools I switched to different Document Mode and the animations ran just nice. Can't find out what activates quirks right now but you have an issue to investigate. Start with passing the strict validation or moving to transitional or html5 <!doctype html>