Search code examples
csshovercss-transitionsscale

CSS3 Transform Scale - Blurry Desktop & Perfect Mobile

I have a div with a background-image. On hover, I apply 2 filters (contrast and brightness) and do a small scaling.

During the scale transition the image gets very blurry on Chrome and Safari (after stopping the movement it gets more defined but still blurry) and in Mozilla the image gets blurry. At my iPad (Chrome and Safari) this animation looks smooth and great (is usual to have blurry and non-smooth animation on mobile devices but this was not the case...).

Tried to apply some translate3d(0,0,0), translateZ(0px), perspective: 1000 to get some hardware CSS3 acceleration but still the same result.

Here is some code:

.animate {
  position: absolute;
  left: 50px;
  z-index: 2;

  width: 320px;
  height: 180px;

  background-image:url('./images/example.png');
  background-size: cover;
  background-position: center center;

  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  transition: 300ms ease-out;
}

.animate:hover {
  transform: scale(1.03);
  filter: contrast(120%) brightness(100%);
}

This happens even if I replace the background image of the div for a <img> tag.

Solution

  • try using scale3d instead of scale..just a guess. Usually it's the other way around, where it is smooth in the browser and not on iPad.