CODEWITHSUNDEEP
cssfirefoxcss-transitionscss-transforms
00-BBB
00-BBB

Reputation: 866

Firefox transform scale image bug. Image flashes a small version of itself when using hover transform transition

While trying to fix one bug I've come across another, pretty sure it was when my version of Firefox updated today. I'm trying to scale an image slightly on hover for a zoom effect.

I was having trouble in Firefox with the image shifting / wiggling after using transform: scale/scale3d. Something to do with half pixels I assume. I've seen this issue being discussed before - ie. here and here, but none of the solutions mentioned anywhere worked for me. In the end I managed to 'fix' it by tweaking either the scale ratio or the actual size of the image file.

But then a stranger bug started happening in Firefox (v.45.0.1) , where the image flashes a small version of itself when you first hover over it. This only happens once, but can be recreated again by doing a normal page refresh. Happens with other transforms as well as scale, eg. rotate(). Is there anything I can do about this other than submit a bug report & wait for Firefox to fix? And has anyone else noticed this / does it happen in older Firefoxes?

Also if anyone has a better fix for the image wiggle issue, that would be amazing :)

I've set up a Codepen example here trying different fixes for the wiggle issue, but the Firefox bug can currently be seen on all the icons. 

.hoverPop {
  -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75);
}
.hoverPop:hover {
  -webkit-transform: scale3d(1.2, 1.2, 1.2);
  transform: scale3d(1.2, 1.2, 1.2);
}
img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
}
.imgwrap {
  width: 65px;
  margin: 0 auto 12px auto;
  height: 65px;
}
<div class="imgwrap">
  <img class="hoverPop" src="http://i1175.photobucket.com/albums/r631/Bananafarma/testIcon_zpsfrhmw5qd.png" alt="test">
</div>

Cheers :)

Upvotes: 2

Views: 2130

Answers (1)

mondrey
mondrey

Reputation: 456

I solved this by adding following. This fixes FF v45.0.1 bug which displayed the smaller image on hover with transition for me.

img {
image-rendering: optimizeQuality;
}

Upvotes: 4

Related Questions