7

I'm animating the width of a li element using jQuery in a simple snippet of code. I'm using hover() as the handler and .animate() to animate the width. Here is my code. 

$('li').each(function() {
    //store the original width of the element in a variable
    var oldWidth = $(this).width();
    $(this).hover(
        function() {
            //when the mouse enters the element, animate width to 900px
            $(this).animate({width: '900px'}, 600, 'linear')
        },
    function() {
            //when the mouse leaves, animate back to the original width
            $(this).animate({width: oldWidth}, 350, 'linear')
        }
   );
});

The code is really really simple and works but with one very odd quirk in Chrome. When animating the elements in and out, the li elements "shake" as if they're really cold and were shivering. You can see the behavior here in a live example: http://missmd.org/ (edit: bug is now fixed)

I've animated a bunch of stuff before with jQuery and never seen this behavior. Is there any explanation for why it occurs and how I can get around it? I'm wondering if it's because I've floated the elements to the right and am animating to the left. The bug is maddening and detracts from the overall presentation a lot (at least to me). Anyone else seen this before?

Edit to clarify: it's not the actual li element that "shivers" it's the text within it that shakes slightly but noticeably from left to right very quickly as the animation runs. I'm stumped.

Edit two: after fiddling with the CSS a bit now I can only reproduce the effect in Chrome (21.0.1180.60 beta-m for me). In Firefox it works as intended. It also works great in IE. Very ironic that Chrome (usually great with this stuff) is giving me trouble now. Pulls hair out, checks sanity

Here is my HTML to help get to the bottom of this. We have reproduced the problem in ChrisFrancis' jsFiddle. 

<nav>
    <ul class="nav">
        <li class="one">
            <a href="homeandnews/">
                <span class="title">Home and News</span>
                <br/>
                <span class="subtitle">Learn more about me and read general updates!</span>
            </a>
        </li>
    </ul>
<nav>

I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it.

wnajar
  • 747
  • 1
  • 7
  • 27
  • 2
    I don't see this behaviour. Perhaps it was warmer when I tried? – chrisfrancis27 Aug 01 '12 at 14:33
  • I just viewed you page In Firefox. No problem, it's working fine. Couldn't spot the shaking effect you mentioned. – SexyBeast Aug 01 '12 at 14:35
  • Haha, great comment. When you hover over any of the `li` elements and they animate width, the text within them shivers from left to right really oddly. Look closely at the right of the screen. The only way I could show you is a video. I've tried on multiple machines and get the same effect oddly. I'm stumped. It's not the actual `li` element that shivers, it's the text inside it. I'll clarify the question. – wnajar Aug 01 '12 at 14:36
  • I don't see this odd behavior – Luka Aug 01 '12 at 14:36
  • 1
    Whilst I can't reproduce that, it sounds like a pixel-rounding error. But I've only seen that happen when you animate one edge of an element in one direction, and compensate for the content position by animating it the opposite way... – chrisfrancis27 Aug 01 '12 at 14:38
  • Ah god, please tell me I'm not going insane. The code looks 100% correct to me and I know it's right I don't know what could cause that. :( – wnajar Aug 01 '12 at 14:39
  • @ChrisFrancis that was my best guess to the problem. ANOTHER EDIT: this only happens in Chrome! – wnajar Aug 01 '12 at 14:39
  • 1
    I've put together a [test case here](http://jsfiddle.net/CbD2k/) with 2 examples - in one of them, the animation durations are out by 1ms which will force some shaky pixel madness, the second durations are identical and so (theoretically) should have no shaking. Can you give them a test on your Chrome? – chrisfrancis27 Aug 01 '12 at 14:49
  • Woo! Finally someone else sees what I'm talking about and can confirm I'm not mental. I looked at your example and indeed when animating back in the first example you can see the shaky madness although it isn't as bad. I wonder if it's just the fast animation speed that Chrome has problems with? That's **extremely** odd how it only shakes when animating _in_ and not out though. I'm lost. – wnajar Aug 01 '12 at 14:52
  • I'll also include my HTML to troubleshoot. – wnajar Aug 01 '12 at 14:54
  • I'm still not sure what's causing this - you're only animating one property, and regardless of the width, the right-hand edge should be floated hard against the outer container. Perhaps it's a rendering bug in Chrome where the right-hand edge position is calculated after determining the left-hand edge and width. But I'm just guessing... – chrisfrancis27 Aug 01 '12 at 15:07
  • NO WAY!!! My Chrome just updated itself and now I can reproduce the issue too! Previous version was 20.0.1132.57, new version is 21.0.1180.60 (same as yours). Definitely a Chrome bug!! – chrisfrancis27 Aug 01 '12 at 15:08
  • 1
    IT'S A BUG IN CHROME!!!! success.jpg they messed up on something. Looks like I'm not crazy after all. So anyone want to submit the bug report or should I? ChrisFrancis I suppose you have dibs. – wnajar Aug 01 '12 at 15:09
  • 1
    Haha, yeah sure I'm on it. Will try and create a reproducible test case similar to your site - my JSFiddle with the deliberate pixel rounding error actually works BETTER with the new update... :/ – chrisfrancis27 Aug 01 '12 at 15:10
  • Well, this is both exciting and frustrating at the same time. Hopefully they'll fix it soon. – wnajar Aug 01 '12 at 15:21

5 Answers5

5

I was looking to this issue as well and this: -webkit-backface-visibility: hidden; solve my problem. I add this odd shaking while using CSS3 transform on a SVG.

More info can be found here: CSS3 transform rotate causing 1px shift in Chrome

Hope it helps

Community
  • 1
  • 1
bzin
  • 1,921
  • 2
  • 14
  • 15
  • this did the trick thank you! had horizontal leftover lines (artifacts) after a box-shadow hover effect with a transition applied. – Max Sep 09 '14 at 21:11
4

I changed your css: ul.nav li a, adding float: right to it and that fix the shake.

Anyway if it helps, I had the same problem when animating height of a div within another div with height:auto. Changing the height to a fix width solved it.

Hope it helps.

Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
Jaster
  • 56
  • 3
2

This seems to be a bug in Chrome version 21.0.1180.60 and may also be present in other versions. Nothing wrong with the code here and I guess we just leave it up to workarounds or submitting a bug report now.

Sigh.

wnajar
  • 747
  • 1
  • 7
  • 27
1

Had similar issue with shaking SVGs when there's a CSS transition applied to parent tag. I tried to apply everything I could randomly, and this fix finally helped:

svg {
  transform: translate3d(0, 0, 0);
}
artnikpro
  • 5,487
  • 4
  • 38
  • 40
  • This fixed it for me. I had `` and a applying `transform: translate3d(0, 0, 0);` to it fixed the jittering issue. – GTCrais Jan 30 '19 at 14:13
0

This problem occurred with some divs when I was trying to animate another div within it. What I noticed is that it happens if the div or element has css property display:inline-block. Making the element float would have solved the problem, but inline-block was required in my case.

I noticed that the element had also vertical-align:middle css property. Changing it to vertical-align:text-bottom solved the problem. No more shaking effect in Chrome v23 (may be the bug is still persisting in newer versions).

Ghost-Man
  • 2,179
  • 1
  • 21
  • 25