Image inside svg pattern is blurried after zoom in

Question

I'm having rect inside svg and rect is filled with some pattern. This pattern is just png image. Zooming this rect work fantastic in FireFox, Safari etc, but not in Chrome and Chromium. Chrome is making this image a little bit blurry. I was searching for similiar problems, but i need svg, rect, pattern to be 100% width and height... it is they need to be 100% of container size and not some fixed size. I created fiddle to see the effect: http://jsfiddle.net/j5gfjnpd/2/

<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <defs>
      <pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
      <image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
      </pattern>
    </defs>
    <g id="mapZoom">
    <rect width="100%" height="100%" fill="url(#floor)">   
    </rect>

    </g>
  </g>
</svg>
</div>

To see this effect you have to zoom-scroll the image and search for some small captions. In Chrome they are blurried and in FireFox they are really clean and nice.

Is there some fix to this, because i'm losing my head trying to fix this. I will be really happy to see some help. Thanks in advance

Answer 1

My best guess is that the zoom is being done on the GPU by Chrome, in which case, it's not re-rasterizing the jpg, it's just doing pixel interpolation when it scales the asset. AFAIK, there is no reliable way to kick Chrome to re-rasterize, but you can try doing it by adding a transition/animation that can't be performed on the GPU (something that's not a scale/skew/position transform or opacity).