codepen.io - Text element is overlapping the SVG object
Categories
(Core :: Layout: Grid, defect)
Tracking
()
| Webcompat Score | 1 |
People
(Reporter: rbucata, Unassigned, NeedInfo)
References
(Regression, )
Details
(Keywords: regression, Whiteboard: [webcompat-source:web-bugs])
Attachments
(1 file)
|
510.81 KB,
video/mp4
|
Details |
Environment:
Operating system: Windows 11
Firefox version: Firefox 143.0b7
Steps to reproduce:
- Navigate to: https://codepen.io/th3s4mur41/pen/RNWdxbz
- Observe the console output
Expected Behavior:
Text is outside of the SVG circle object
Actual Behavior:
Text is inside the SVG circle object
Notes:
- Reproduces regardless of the status of ETP
- Reproduces in firefox-nightly, and firefox-release
- Does not reproduce in chrome
Created from https://github.com/webcompat/web-bugs/issues/176002
|
Reporter | |
Updated•4 months ago
|
|
|
Reporter | |
Updated•4 months ago
|
|
|
Reporter | |
Comment 1•4 months ago
|
||
|
||
Comment 2•4 months ago
|
||
In general demos on codepen.io aren't webcompat issues; moving this to Core :: Layout for triage as a correctness bug.
|
||
Comment 3•4 months ago
|
||
inline-size: min(75%,10rem); seems to be culprit.
Regression window:
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=f47094b3b694afdce1c960c725a4eae2332d3f87&tochange=47d7f75d469ff7c8ae8db10377265da69c66da59
Suspect: Bug 1519519
|
||
Comment 4•4 months ago
|
||
Set release status flags based on info from the regressing bug 1519519
:emilio, since you are the author of the regressor, bug 1519519, could you take a look? Also, could you set the severity field?
For more information, please visit BugBot documentation.
|
||
Updated•4 months ago
|
|
|
||
Updated•3 months ago
|
|
||
Comment 5•3 months ago
|
||
Doesn't actually need min() nor svg, reduced to
<!DOCTYPE html>
<div style="display: grid; width: 200px; grid-template-columns: 200px">
<div style="display: grid; grid-row: span 2; grid-template-rows: subgrid">
<canvas width="100" height="100" style="inline-size: 100%; background: cyan"></canvas>
text
</div>
</div>
Seems a subgrid problem with percentages.
|
||
Updated•3 months ago
|
|
|
||
Comment 6•3 months ago
|
||
(In reply to Oriol Brufau [:Oriol] from comment #5)
Doesn't actually need
min()nor svg, reduced to<!DOCTYPE html> <div style="display: grid; width: 200px; grid-template-columns: 200px"> <div style="display: grid; grid-row: span 2; grid-template-rows: subgrid"> <canvas width="100" height="100" style="inline-size: 100%; background: cyan"></canvas> text </div> </div>Seems a subgrid problem with percentages.
Regression window:
https://hg-edge.mozilla.org/mozilla-central/pushloghtml?fromchange=ac95bdf3c0b3f6f0bb31bb49e7714ca93a5a9c9a&tochange=5d3e1ea7769357bce7297b83be3863034bcf656e
Bug 1553824 - [css-grid-2] Invalidate any stored used track sizes on subgrids too.
|
||
Comment 7•3 months ago
|
||
Ting-Yu, I think you're familiar with track sizing? Can you set a severity on this? Maybe it's a dupe...
|
|
||
Comment 8•3 months ago
|
||
Ah, Tiaan had already S3'd this, but still would be good if you can take a look.
|
|
||
Updated•3 months ago
|
Description
•