Img with SVG srcset is rendered all black, but not if using src (Chrome renders both cases in color).
Categories
(Core :: DOM: Security, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox111 | --- | fixed |
People
(Reporter: twisniewski, Assigned: tnikkel)
References
()
Details
Attachments
(2 files)
The attached testcase renders two imgs with SVG sources, one using a srcset, and the other using src (with very slightly different URL GET parameters). Firefox renders the srcset image in all-black, while Chrome does not.
But it's more mysterious than that. If one changes the srcset URLs to match the src, then Firefox renders both in color. Chrome also doesn't render the files in color when opening the URLs directly, only when renders via img tags. And if I download the images and serve them on a local http server, they also seem to render in color for me in Firefox (though they are served as image/svg+xml on the host used in the testcase).
This is causing the SVG images on https://naucme.it/ to appear all-black on Firefox but not Chrome, as reported on webcompat.com.
|
Assignee | |
Comment 1•2 years ago
|
||
Regression ranging this I get the following.
We go from displaying both in color to displaying both in black
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0e41d07a703f19224f60b01577b2cbb5708046c9&tochange=09a4282d1172ac255038e7ccacfd772140b219e2
We got from display both in black, to displaying only the one in black
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=004536f666bfc2acf7002da703f003216f8aa5a5&tochange=de63e64b9090789daea9ad11d3cd11b4f284afe5
Nothing stands out in either of these for me.
|
|
Assignee | |
Comment 2•2 years ago
|
||
If I wget the url https://naucme.it/_next/image?url=%2Fimages%2Fmain_illustration.svg&w=1920&q=75 then the file I get displays in color in Chrome, Safari and Firefox. If I visit that URL in firefox and save the page to a file then the resulting file displays as black in Chrome, Safari, and Firefox. The wget file matches the file I get when I save page as in Safari and Chrome. The Firefox saved file is different. And the differences seem significant.
Firefox saved file:
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1930.2959" y1="840.238" x2="2566.604" y2="840.238">
<stop offset="2.999933e-02" style=""/>
<stop offset="0.21" style=""/>
<stop offset="0.62" style=""/>
<stop offset="1" style=""/>
</linearGradient>
Wget saved file:
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1930.2959" y1="840.238" x2="2566.604" y2="840.238">
<stop offset="2.999933e-02" style="stop-color:#9753FF"/>
<stop offset="0.21" style="stop-color:#7156FF"/>
<stop offset="0.62" style="stop-color:#626BF5"/>
<stop offset="1" style="stop-color:#636CF6"/>
</linearGradient>
This is a very quick analysis, but in the Firefox saved file the gradient stops don't seem to be given colors? That would explain the rendering.
So the server is sending different things in different situations it seems.
|
Reporter | |
Comment 3•2 years ago
|
||
Hmm. I'm not so sure. I just tried copy-as-curl in Firefox and Chrome on one of the image requests on the page in the network devtools, and compared the results of running those Curl commands. It looks like neither are getting style="" (in fact, when I preview the SVG in the Firefox devtools network panel's response tab, it shows the colors as well, and if I inspect the SVG manually in the devtools I likewise see no style="").
|
||
Comment 4•2 years ago
|
||
(In reply to Timothy Nikkel (:tnikkel) from comment #1)
Regression ranging this I get the following.
We go from displaying both in color to displaying both in black
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0e41d07a703f19224f60b01577b2cbb5708046c9&tochange=09a4282d1172ac255038e7ccacfd772140b219e2We got from display both in black, to displaying only the one in black
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=004536f666bfc2acf7002da703f003216f8aa5a5&tochange=de63e64b9090789daea9ad11d3cd11b4f284afe5Nothing stands out in either of these for me.
From local cache build,
The former:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=a09f9b7135adbde0bb10a1a2b8a3b03766b37769&tochange=8dad48102b135b1f63008ceabe3469ab171920b0
Suspect: Bug 1379314
Suspect: Bug 1262842
|
|
Assignee | |
Updated•2 years ago
|
|
|
Assignee | |
Comment 5•2 years ago
|
||
(In reply to Alice0775 White from comment #4)
Suspect: Bug 1262842
Hmm, so this might be CSP blocking style attributes in svg when it shouldn't?
|
||
Comment 6•2 years ago
|
||
(In reply to Timothy Nikkel (:tnikkel) from comment #5)
(In reply to Alice0775 White from comment #4)
Suspect: Bug 1262842
Hmm, so this might be CSP blocking style attributes in svg when it shouldn't?
Hey Freddy, can you take a look, or have someone in your team take a look?
|
|
Assignee | |
Comment 7•2 years ago
|
||
I think I have a patch for this. Will upload and request review.
|
|
Assignee | |
Comment 8•2 years ago
|
||
This is the same fix as bug 1262842 but extended to imageset.
|
||
Updated•2 years ago
|
|
||
Comment 10•2 years ago
|
||
| bugherder | ||
Description
•