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;
Related
I have this weird issue happening only in safari ios:
As you can see from the gif above (click on it to see it properly), the div is not moving unless I click on it in developer tools. I'm not changing any code and the div starts functioning correctly.
Anyone have any ideas why this is happening on ios (not happening on desktop safari)?
I'm using transition: margin-left 500ms ease; on body and then change margin of the div (I keep the vendor prefix -webkit-).
Thanks!
I've experienced a similar issue and it appears to be due to how Safari deals with jQuery animations.
A workaround rather than a fix, but if you use jQuery.css() rather than jQuery.animation(), the issue shouldn't occur. You can then use css animations instead. You could probably use css classes to set the margin-left and just add/remove a class using jQuery on click too.
Cheers
Matt
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.
This piece of javascript works on the latest version of Firefox, Chrome, even Windows 7's IE11.
However, for some reason, on Windows 8.1's IE11 and only on Windows 8.1's IE11, it doesn't execute properly.
$('[data-toggle="tab"]').on('click', function(){
$('.tab-pane').removeClass('animated flipInY');
setTimeout(function () {
$('.tab-pane').addClass('animated flipInY');
},
10);
});
Link to fiddle: http://jsfiddle.net/5Z9x6/2/
The CSS transition is from animate.css http://daneden.github.io/animate.css/. It works flawlessly on modern web browsers; it's not the issue. The issue is with my javascript.
Edit#1: Apparently the stupid thing works properly when I zoom in (over 100%); and half work when zoom out (less than 100%). It just doesn't work at 100%. Can I tag this as weirdest bug ever? xD
Edit #2: And even when zoomed in over 100%, it doesn't work if inside a container div with fixed width.
Ahah!
I tracked this one down, kinda-sorta.
Your code actually works. However, for some reason the Win8.1/IE11 combo takes more screen space to actually execute that animation.
So, load your code again, then use the Control-Minus key and shrink the text as small as you can until you can just make out your navigation buttons. Click on your front and back and you'll notice the animation does run.
Chrome used to improperly exclude the scroll bar in its media queries. This means that with 1000px of visible space and a 17px scroll bar, other browsers would report 1017px as a width so far as Media Query is concerned, but webkit browsers (such as Chrome and Safari) did not do this.
These browsers could hit a specific size where a scroll bar would appear in one resolution, then change resolutions to another where it would appear, then it would go back to when it didn't... the solution caused an ugly blank space to appear where the scroll bar should, but it did not. It came out looking like a glitch, and the DOM resize events did not fire properly so it was not something you could react to properly in JS.
However, now in Chrome 29, this appears to have changed. Now they are going off of how the specification works and including the scroll bar in their media query calculations... just like Firefox and Internet Explorer (and how the specification says they should have all along). This fixes the bugs, but causes another problem in that the JS to try to detect the Chrome/Safari issue now will have false positives, because it is not a concern with newer versions of Chrome and I assume eventually Opera and Safari as well.
In light of all of this, I cannot find any information anywhere on when this was fixed in either Chrome or Webkit. I hate having to resort to browser version testing in my JS to work around these flaws, but I am just guessing blindly on Chrome 29+ for the moment as a temporary patch and would love an authoritative answer... I have tested in Safari 6.0.5, but the old method is still being used...
Does anybody know in what version of Chrome and/or Webkit this was fixed?
Chrome is no longer using the webkit engine as of Chrome v. 28 it now uses the Blink Rendering Engine. So no need to be detecting this for chrome unless you need it for previous versions.
For more on Blink: Blink Documnetation
For more on the Release: Next Web Article on Webkit/Blink Switch
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/