1

This css changing width from 80px to 120px on hover:

-webkit-transition: width .5s ease, color .5s ease, background .5s ease;
-moz-transition: width .5s ease, color .5s ease, background .5s ease;
-o-transition: width .5s ease, color .5s ease, background .5s ease;
transition: width .5s ease, color .5s ease, background .5s ease;

Is resulting in this problem:

enter image description here

On Chrome (24.0.1312.57 on Mac) when the width returns back to 80px.

The problem is not present on Safari.

Is this a known issue, or is there a way to fix this?

mjohnst.com is the website.

Michael Johnston
  • 2,364
  • 2
  • 27
  • 48

1 Answers1

1

As I can't test it, I assume that the problem is that background image under the about element.

Try removing the background image and test if that gives you a problem. And then you'll be closer to solution.

I put an example on jsfiddle. Markup looks like this:

<div class="image">
    <div class="trans">
        <a href="#">About</a>
    </div>  
</div>

Update #1

Sorry, but I cannot test it on Mac OS, and to not shoot in the dark see similar question and try all possible methods from there Link.

Community
  • 1
  • 1
Branislav
  • 221
  • 1
  • 7
  • I think you're right, the example you put up works fine. How should I fix the issue with the background image? mjohnst.com if you want to see – Michael Johnston Feb 13 '13 at 03:06
  • 1
    I've tried with `-webkit-transform: translateZ(0)` on animated element and I think the flicker (I have it too on chrome but it's hardly noticable) goes away ... – Branislav Feb 13 '13 at 05:21
  • 1
    The link you provided in the update gave me the answer. I had to add `-webkit-backface-visibility: hidden;` to my `body {background-image:url(...);}` CSS – Michael Johnston Feb 13 '13 at 16:29