marquee tag scrolling overflows when the parent is a flexbox element
Categories
(Core :: Layout, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox-esr78 | --- | unaffected |
| firefox85 | --- | unaffected |
| firefox86 | --- | verified |
| firefox87 | --- | verified |
People
(Reporter: karlcow, Assigned: emilio)
References
(Regression, )
Details
(Keywords: regression)
Attachments
(2 files)
|
400 bytes,
text/html
|
Details | |
|
48 bytes,
text/x-phabricator-request
|
RyanVM
:
approval-mozilla-beta+
|
Details | Review |
- Copy and paste in the url bar of your firefox.
data:text/html,<!doctype html><div style="width:200px;border: 2px solid red;"><div style="display:flex;"><marquee>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt commodi ratione iste tempore nemo mollitia exercitationem error cum excepturi sit ab eius consectetur quasi possimus facere, iusto est impedit laborum.</marquee></div></div>
Expected:
text scroll in the red border area
Actual:
text scroll on the full page.
Note:
On WebKit and Blink, the marquee text scrolls inside the size of the flexbox parent div.
<div style="width:200px;border: 2px solid red;">
<div style="display:flex;">
<marquee>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt commodi ratione iste tempore nemo mollitia exercitationem error cum excepturi sit ab eius consectetur quasi possimus facere, iusto est impedit laborum.</marquee>
</div>
</div>
|
||
Comment 1•3 years ago
|
||
This isn't flex-specific; we have the same rendering if you use display:inline-block instead of display:flex (forcing intrinsic sizing on the marquee):
data:text/html,<!doctype html><div style="width:200px;border: 2px solid red;"><div style="display:inline-block;"><marquee style="border:1px solid black">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt commodi ratione iste tempore nemo mollitia exercitationem error cum excepturi sit ab eius consectetur quasi possimus facere, iusto est impedit laborum.</marquee></div></div>
|
|
||
Comment 2•3 years ago
|
||
|
Assignee | |
Comment 3•3 years ago
|
||
Seems like a regression from bug 1618584.
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 4•3 years ago
•
|
||
So what other browsers do is to zero out the min intrinsic size of the scroll frame, effectively: https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/layout/ng/ng_block_node.cc;l=332;drc=7553394f9e02446701a93e756360f873361f07bc
Is there a way to do that without more side-effects? contain:size clearly doesn't work here...
|
|
Assignee | |
Comment 5•3 years ago
|
||
I couldn't come up with a way to effectively cause this effect with
regular CSS I could put in marquee.css... But maybe y'all have thoughts?
|
|
Assignee | |
Comment 6•3 years ago
|
||
Can you think of a better way to fix this that doesn't hard-code the marquee in our scrollframe code? It seems quite unfortunate, but I haven't been able to come up with anything particularly better... I would've hoped some combination of overflow-wrap: anywhere would be able to help in this case, but not really...
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 7•3 years ago
|
||
Comment on attachment 9202923 [details]
Bug 1692380 - The intrinsic min isize of the marquee scroller should be zero. r=dholbert
Beta/Release Uplift Approval Request
- User impact if declined: Some sites with marquees might look broken.
Sorry for the super-late uplift request, but I think this is worth taking. It's a very simple fix which matches Chromium and is extremely targeted to marquee.
- Is this code covered by automated tests?: Yes
- Has the fix been verified in Nightly?: No
- Needs manual test from QE?: Yes
- If yes, steps to reproduce: comment 0, test-cases in the bug.
- List of other uplifts needed: none
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Super-targeted fix to fix marquee intrinsic size to match other browsers.
- String changes made/needed: none
|
|
Assignee | |
Updated•3 years ago
|
|
|
||
Comment 8•3 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)
Can you think of a better way to fix this that doesn't hard-code the marquee in our scrollframe code?
Per discussion in matrix: no, I can't think of anything better. This seems fine to me.
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/6f7e9ff0c23e The intrinsic min isize of the marquee scroller should be zero. r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/27614 for changes under testing/web-platform/tests
|
||
Updated•3 years ago
|
|
|
||
Updated•3 years ago
|
|
||
Comment 11•3 years ago
|
||
| bugherder | ||
|
||
Comment 12•3 years ago
|
||
Comment on attachment 9202923 [details]
Bug 1692380 - The intrinsic min isize of the marquee scroller should be zero. r=dholbert
Approved for 86.0rc1.
|
|
||
Comment 13•3 years ago
|
||
| bugherder uplift | ||
|
||
Updated•3 years ago
|
|
||
Comment 14•3 years ago
|
||
Verified as fixed on Firefox Nightly 87.0a1 on Windows 10 x64, macOS 10.15 and on Ubuntu 20.04.
Upstream PR merged by moz-wptsync-bot
|
|
||
Comment 16•3 years ago
|
||
Verified as fixed on Firefox 86.0 candidates build 1 on Windows 10 x64, macOS 10.15 and on Ubuntu 20.04.
Description
•