9

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

Krzysztof Lewko
  • 982
  • 7
  • 24
  • There's no link in your image tag. Can you please add the problematic image to the fiddle. – Michael Mullany Dec 11 '15 at 23:07
  • @MichaelMullany thanks, for some reason it desappeared from the server, now i reuploaded it to imgur – Krzysztof Lewko Dec 12 '15 at 10:17
  • 1
    This is due to a `webkit` anti-alias bug that affects CSS transforms when transforming images, text, or background-images. This bug does not show its ugly head when you keep your scale `1` and below. So don't scale above a scale factor of `1`. When an image is scaled above `1`, it changes after elements are painted and rendered into a compositing layer. SVG can not use 3D transforms, only 2D transforms, so i dont see this due to the GPU, but just a `webkit` bug. – Jonathan Marzullo Dec 15 '15 at 14:25

1 Answers1

5

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).

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105