1367461 - SVG background-images with preserveAspectRatio='none' render differently to Chrome/WebKit

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Thomas Wisniewski]

Attachment: testcase.html

Chorme/WebKit appear to render SVG background-images with background-size:contain as Firefox does when background-size:100% 100% is used instead (that is, Firefox does not stretch them vertically the same way). Compare the attached testcase in both browsers for a quick example (note that Edge did not seem to render the SVG at all when I just tried it).

Comment 1

[Thomas Wisniewski]

Actually, I'm unsure if it's specific to SVGs. I just tried replacing the data-url with a 2x2 pixel PNG and it might also be showing the same rendering-difference:

background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFUlEQVQI1wXBAQEAAACAEP9PF1CpMCnkBftjnTYAAAAAAElFTkSuQmCC");

Comment 2

[Thomas Wisniewski]

Jet, is this something we should triage soon?

Comment 3

[Thomas Wisniewski]

dholbert, what do you think about this one?

Comment 4

[Daniel Holbert [:dholbert]]

This seems interesting, though I'm not sure this has anything to do with "background-size:contain".

With the testcase as well as the original URL ( http://www.makeuseof.com/service/linux/ ), the rendering doesn't seem to be impacted by the "background-size:contain" styling.  Neither Firefox nor Chrome change their behavior if I uncheck that style in devtools.

Maybe that's different depending on DPI or some other system metric, though -- could you confirm whether "background-size:contain" really makes a difference here?

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 6

[Daniel Holbert [:dholbert]]

Facts about testcase 2:
* We draw three short dark triangles on "testcase 2" (32px tall each).
* Chrome and Edge only draw one tall triangle (100px tall, the full height of the div).
* THOUGH: if I remove preserveAspectRatio='none' from the SVG image, then Edge & Chrome change to match us.  (and our rendering doesn't change.)  So it seems that attribute influences their calculation of the image's height, when they decide how to tile it.

The Chrome/Edge behavior seems odd to me -- IIRC preserveAspectRatio is only supposed to influence *whether* an image is stretched/skewed when rendered to a given viewport. And in this case, when preserveAspectRatio is omitted, Chrome/Edge seem to agree with us that the viewport for each image-repetition is only about 1/3 the height of the div. But they change their mind about the viewport size if preserveAspectRatio='none' is provided.

In other words: IIUC, preserveAspectRatio is only supposed to take effect *after* a viewport has been decided on (and then influences how the SVG content scales to fit that viewport).  But in this case, Chrome/Edge seem to be letting it influence the actual decision about how big the viewport itself should be (or "viewports", really, since the image gets tiled).

https://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute

Anyway -- at this point, given just one known affected site and not super-serious breakage, I'm not inclined to worry about this too much, though perhaps we should file a Chrome/Edge bug (and perhaps find out via that bug if they have any spec justification for their behavior).

Comment 7

[Thomas Wisniewski]

I agree with your assessment. Clearing the needinfo.

Comment 8

[jacob]

For anyone who needs to scale an SVG mask in one dimension, a workaround is to inline the SVG like so...

elem {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1920 160' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E %3Cpath d='M1925,165L-5,165L-5,128.941C-5,128.941 589.057,0 1068.81,0C1413.54,0 1758.26,47.987 1925,74.999L1925,165Z'/%3E %3C/svg%3E"); /* you need the  viewbox set as well as preserveAspectRatio="none" */
    mask-size: 100% 160px;
}

Comment 9

[Ksenia Berezina [:ksenia]]

https://github.com/webcompat/web-bugs/issues/5411 has changed design and I don't see the issue anymore

https://github.com/webcompat/web-bugs/issues/85868 is still reproducible, I've moved it to bug1891075

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: SVG resource for testcases (used on https://theflowerfarm.nl/ )

I reduced another testcase from the current version of how this is reproducing on https://theflowerfarm.nl/ (for the "want to know more about palm oil" section, per bug 1891075 comment 0).

Here's the SVG that the site uses, for use in the testcase.

Comment 11

[Daniel Holbert [:dholbert]]

Attachment: testcase 3