Bug 125289 – SVG Patterns and Masks in SVG images don't take screen resolution into account

• Component: SVG
• Status: NEW

[Dirk Schulze]

It seems like we do not take the real screen pixel density into account when we create image buffers for SVG patterns.

In the example image at http://dev.w3.org/fxtf/css-masking-1/#the-mask-repeat, the background circles are pixelated on a retina display, while the white/black circle in the foreground isn't.

[Dirk Schulze]

We identified this problem with SVG Filters first, but it affects all situations where we buffer the rendered content:

* SVG filters
* SVG Masks
* SVG clip-path (in some situations)
* SVG Patters

[Tim Horton]

Hmm, I fixed this for the traditional case, but it must not be plumbed through to SVG-as-image. Possibly because the fake Page that we make for SVGImage doesn't know about the deviceScaleFactor of the parent Page/etc.?

[Tim Horton]

(In reply to comment #2)
> Hmm, I fixed this for the traditional case, but it must not be plumbed through to SVG-as-image. Possibly because the fake Page that we make for SVGImage doesn't know about the deviceScaleFactor of the parent Page/etc.?

And indeed, you'll notice that if you go directly to http://dev.w3.org/fxtf/css-masking-1/images/mask-repeat.svg, it is sharp on a retina display.

[Radar WebKit Bug Importer]

<rdar://problem/16895584>

[Dirk Schulze]

(In reply to comment #3)
> (In reply to comment #2)
> > Hmm, I fixed this for the traditional case, but it must not be plumbed through to SVG-as-image. Possibly because the fake Page that we make for SVGImage doesn't know about the deviceScaleFactor of the parent Page/etc.?
> 
> And indeed, you'll notice that if you go directly to http://dev.w3.org/fxtf/css-masking-1/images/mask-repeat.svg, it is sharp on a retina display.

I just tried to set the device pixel ratio to the page created with SVGImage (hard coded). The image looks indeed better initially. If you zoom in the page, CMD +, the pattern is slightly blurry again Nst much but if you look closer noticeable.

The real problem is that the image seems to get gigantic in memory size as more you zoom in causing the browser to crash at zoom level 200%.

Everything tested with the CSS Masking document. So simply setting the devicePixelRatio seems to be wrong.

[Tim Horton]

(In reply to comment #5)
> (In reply to comment #3)
> > (In reply to comment #2)
> > > Hmm, I fixed this for the traditional case, but it must not be plumbed through to SVG-as-image. Possibly because the fake Page that we make for SVGImage doesn't know about the deviceScaleFactor of the parent Page/etc.?
> > 
> > And indeed, you'll notice that if you go directly to http://dev.w3.org/fxtf/css-masking-1/images/mask-repeat.svg, it is sharp on a retina display.
> 
> I just tried to set the device pixel ratio to the page created with SVGImage (hard coded). The image looks indeed better initially. If you zoom in the page, CMD +, the pattern is slightly blurry again Nst much but if you look closer noticeable.
> 
> The real problem is that the image seems to get gigantic in memory size as more you zoom in causing the browser to crash at zoom level 200%.
> 
> Everything tested with the CSS Masking document. So simply setting the devicePixelRatio seems to be wrong.

Setting devicePixelRatio is not enough to fix page scale or page zoom, you have to multiply those in too :D

And the other part sounds like we draw more than the visible part of the image?