Search code examples
cssmobile-safaricss-transforms

Image is blurry when upscaling in Mobile Safari

I'm implementing a Pinch to Zoom gesture in JS/CSS. In order to do so, I'm putting a fairly large image source inside a small sized IMG tag and then apply a CSS scale transform to make it bigger. Things are working fine however on Mobile Safari the image gets blurry once I start scaling up. It should not be the case as the src for the image is big enough to support this size, but somehow Mobile Safari is displayed it as blurry.

I have debugged the issue quite a bit and found out that the culprit is an unrelated div in my page that is setting translate3d(0,0,0). To my understanding this is a Hack to trigger GPU hardware acceleration. What I believe it is happening is that because of translate3d(0,0,0), hardware acceleration is being applied when rendering the <img/>, and since the <img> is small in size, it is drawn small and the scale is applied afterwards.

To better understand the problem, I have it this code, available in in codepen here

HTML

<div>
  <div id="translate3d-div"/>
</div>

<img id="image" src="https://www.trackalytics.com/assets/thumbnails/lipsum.com.jpg"/>

CSS

#translate3d-div {
  /* If I remove this, the image is not blurry */
  transform: translate3d(0,0,0)
}

#image {
  width: 95px;
  height:76px;
  transform: scale(20);
}

This displays the image blurry on Mobile Safari, but it works fine on Chrome in Android.

Is there a way to fix this other than removing the unrelated translate3d? I don't think I can do that since it might be used by some other feature in the webpage.

enter image description here

Solution

  • I couldn't find a working hack for this, but the workaround I used was to simply create a bigger HTMLImageElement and scale it down initially. Then scaled up it will not look blurry. This made my code slightly more complicated but it is working fine.