css - Jerky CSS3 transition in Firefox -

css - Jerky CSS3 transition in Firefox -

i trying simple image fade on rollover - works fine , smooth in chrome, firefox bit jumpy. i've tried doing backface-visibility trick on container, still no luck.

anyone have ideas?

jsfiddle

html

<div class="link-box large"> <div class="image"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrstwh3makrqlu8lloo1xbo6uzikhryf2pgv66h6ol5mb0ks_0r" alt=""> </div> </div>

css

.link-box .image img { transition: .2s ease-out; width:200px; } .link-box.large { position: relative;} .link-box.large:hover .image img { opacity: .65; }

my best guess setting width of image 200px , leaving height unspecified causing browser calculate height of image. if height calculates nice whole number isn't issue. if height calculates decimal may cause of problem.

in case natural dimensions of image 275px 183px.

by changing width of image 200px shrinking image 72.727272...% of natural size.

275/200 = 0.727272... or if prefer fractions: 275(8/11) = 200

now running same equation on height yields:

183(8/11) = 133.090909...

it looks like, under normal run of things, partial pixels cropped, during transition partial pixels aren't beingness cropped, , image warped show partial pixels within same height.

cropped down 133px: not cropped , warped:

now have hypothesis on what's causing problem, on solutions:

you can hard code height of image:

working example

.link-box .image img { transition: .2s ease-out; width:200px; height: 133px; /* manually set height */ }

or if rather not hard code height, can prepare issue anti-alias hack, add together box-shadow.

working example

.link-box.large:hover .image img { opacity: .65; box-shadow: 0 0 0 #000; /* add together non-visible box-shadow */ }

or if you're concerned cross-browser compatibility of using box-shadow, can utilize transparent border:

working example

.link-box .image img { transition: .2s ease-out; width:200px; border: 1px solid transparent; /* add together transparent border */ }

css html5 css3 animation transition