The image on the iphone device becomes blurred after being zoom in

[sivii]

[mreinstein]

I think this might be caused by not snapping the x, y values of the transform based on the current devicePixelRatio of the screen.

If the positioning doesn't occur on "proper" pixel increments, it leads to some blurry pixelation. For a non-retina display, this means that we see pixelation unless the final position is integer pixel-aligned (i.e., no decimal). On retina displays (which oftenhave a window.devicePixelRatio of 2), then we can do positioning on integer pixel or 0.5 pixel increments and not see any blurriness. I assume if window.devicePixelRatio is 4, then blurriness would not occur on integer, 0.25, 0.5, or 0.75 pixel increments.

I think I can come up with a solution to this, where we use the current window.devicePixelRatio (dpr) to determine acceptable increments and snap the transform to those.

@anvaka would you consider a pull request for this?

[oal]

I experienced this today, and was able to solve it by removing any filter and drop-shadow CSS on the panzoom elements, its children and any other elements that appeared on top of it (a modal dialog in my case).

It seems like Safari (both iOS and MacOS) renders elements with shadows only once, then subsequent transform operations on the element, like scale do not trigger a re-render at a higher resolution.

(sorry for bumping an old issue, but I got here from a Google search and maybe others do too, and find this helpful)

[Salitehkat]

Hi, anyone with a different solution? I have no filters & no drop-shadows ini my css but image on ipad and iphone looks extremely blurry after zooming in. Please, anyone with another possible solution? thank you very much,

[anvaka]

Could you please share a link to jsfiddle/jsbin where I could reproduce this and debug it?

[Salitehkat]

Hi, thank you very much for your reponse, I have tried to recreate it in this jsfiddle, but not sure if its accurate, (removed lots of code) and i cant see the same extreme bad quality as in the website we are building... https://jsfiddle.net/salikattu/mu2bgsqa/4/show/

Thanks again.

[anvaka]

Sorry - not able to reproduce this, but I've only tried on a google pixel phone. Are you able to reproduce it on iPhone on the fiddle?

I also looked at the fiddle you've provided - it has way too many things:

<div id="map"> <!-- this is your panzoom host -->
  <svg>
    <foreignobject>
      <picture>  <!-- not even sure what this is -->
        <img /> <!-- this is your image -->
      </picture>
    </foreginobject>
  </svg>
</div>

svg + foreignobject + unknown tag + html inside svg - that is too much moving parts to identify which one results in blurry image.

Any chance you can simplify the DOM structure?

[Salitehkat]

Thank you. I understand. I have scrset declared images embeded inside the svg (that is why the picture tag was necessary), but i removed all that code in order to make it cleaner for the jfiddle. It seems it didnt help. I will provide a better example. I will prepare asap. Thank you again,