html-to-image css grid styling not working properly on latest Firefox
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
Tracking | Status | |
---|---|---|
firefox105 | --- | verified |
People
(Reporter: hristo_iankov, Assigned: emilio)
Details
Attachments
(9 files)
9.57 KB,
image/png
|
Details | |
16.81 KB,
application/x-javascript
|
Details | |
194.03 KB,
application/x-javascript
|
Details | |
1.07 KB,
text/html
|
Details | |
711 bytes,
text/html
|
Details | |
431.19 KB,
application/x-javascript
|
Details | |
711 bytes,
text/html
|
Details | |
489 bytes,
text/html
|
Details | |
48 bytes,
text/x-phabricator-request
|
Details | Review |
Steps to reproduce:
Example URL:
https://jsfiddle.net/51ax8p0j/
Steps to reproduce:
- Install Firefox (Version 102.0.1)
- Create an element with display:grid, grid: 33% 33% 33% / 1fr 1fr, and grid-auto-flow: column.
- Use any html to canvas library (Ex. html-to-image, html-2-canvas, dom-to-image)
- Render the new canvas on the page and compare to the original html element.
Actual results:
The html and canvas do not look the same. It appears that the grid-auto-flow: column gets removed and defaults to row.
Expected results:
The html and canvas should look the same.
Reporter | ||
Comment 1•2 years ago
|
||
The linked jsfiddle can be tested on different browser to show it is working (Chrome 103 & Edge 103) and possibly on older versions of Firefox (untested).
Updated•2 years ago
|
Comment 2•2 years ago
|
||
Comment 3•2 years ago
|
||
Comment 4•2 years ago
|
||
I've attached both JS files that the JSFiddle testcase uses, which I downloaded from here (where the testcase was referencing them):
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js
Testcase itself coming up next.
Comment 5•2 years ago
|
||
Comment 6•2 years ago
|
||
Comment 7•2 years ago
|
||
At first glance, it looks like the grid-auto-flow: column
styling is just getting ignored when html2canvas.js does its thing. (only in Firefox)
The JS library is extremely-minified, which makes it somewhat hard to follow what precisely it's doing... But it looks like there's an un-minified version at https://html2canvas.hertzen.com/dist/html2canvas.js
Comment 8•2 years ago
|
||
Comment 9•2 years ago
|
||
Comment 10•2 years ago
|
||
Oops, it looks like html2canvas.js isn't actually used at all in the original jsfiddle testcase. (It's referenced but unused.)
html-to-image.js is the only script that's actually used there, and googling isn't immediately turning up un-minified source for that one...
Assignee | ||
Comment 11•2 years ago
|
||
One thing I noticed is that getComputedStyle(document.querySelector(".content")).grid
seems wrong (doesn't seem to produce / column
, plus it's unresolved). I haven't checked whether that fixes it, but I can tomorrow.
Comment 12•2 years ago
|
||
OK, so the html-to-image.js library enumerates the stylesheets' cssText
and copies that into a stylesheet inside of a SVG document (which it then draws to a canvas).
And in this case, we seem to be improperly serializing cssText (in part because of the combination of the grid
shorthand-property and the grid-auto-flow
longhand property that follows it while also being one of the things that the shorthand would set). We're excluding the longhand property from our serialized cssText.
I'll post a more-targeted testcase that demonstrates that.
Updated•2 years ago
|
Assignee | ||
Comment 13•2 years ago
|
||
Hah, so comment 11 was close enough, and presumably it will fix it :P
Will take a look tomorrow if nobody gets to it sooner.
Comment 14•2 years ago
|
||
Assignee | ||
Comment 15•2 years ago
|
||
Other browsers also don't roundtrip properly, but they fail less
severely.
Updated•2 years ago
|
Assignee | ||
Updated•2 years ago
|
Comment 16•2 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/fd5fa5692921 Properly fail to serialize grid shorthand when not roundtripping. r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35239 for changes under testing/web-platform/tests
Comment 18•2 years ago
|
||
bugherder |
Upstream PR merged by moz-wptsync-bot
Comment 20•2 years ago
|
||
Verified fixed -- fiddle looks correct in Nightly 105.0a1 (2022-07-27) -- the numbers flow in columns in both parts of the testcase (rather than just in the left part).
Thanks again for the bug report!
Comment 21•2 years ago
•
|
||
Also, for the record, this bug goes back quite a ways -- e.g. Firefox Nightly 66 2019-01-24 matches our recent before-the-fix-landed Nightly rendering of the original testcase and the reduced testcase 4 (and presumably the other testcases which are just minor-variants).
So: not a recent regression. Let's just let this fix ride the trains to release in Firefox 105, I think (no need to think about uplifts/etc).
Reporter | ||
Comment 22•2 years ago
|
||
Thank you guys for the quick response!
Updated•2 years ago
|
Comment 23•2 years ago
|
||
Reproduced in Release 104.0
Verified - Fixed in Beta 105.0b4 and the latest Nightly 106.0a1 (2022-08-30) using Windows 10, Ubuntu 20 and macOS 12.
Description
•