Absolute position layout bug
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
People
(Reporter: guillaume1.gomez, Unassigned)
Details
Attachments
(3 files)
Screenshot From 2025-02-22 13-54-17.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0
Steps to reproduce:
Bug can be reproduced with this code:
<html>
<head>
<title>layout bug</title>
<style>
:root {
--example-wrap-digits-count: 2ch;
--line-number-padding: 4px;
--line-number-right-margin: 20px;
}
pre {
margin: 0;
flex-grow: 1;
padding: 20px;
padding-left: 16px;
font-size: 1em;
font-family: monospace;
line-height: 1.5;
}
code {
padding-left: calc(var(--example-wrap-digits-count) + var(--line-number-padding) * 2 + var(--line-number-right-margin));
position: relative;
word-break: break-all;
display: block;
white-space: pre-wrap;
}
code span {
display: inline;
}
code * {
word-break: break-all;
font-size: 1em;
}
[data-nosnippet] {
width: calc(var(--example-wrap-digits-count) + var(--line-number-padding) * 2);
text-align: right;
display: inline-block;
margin-right: var(--line-number-right-margin);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 var(--line-number-padding);
position: absolute;
left: 0;
}
.expansion [data-nosnippet] {
left: calc((var(--example-wrap-digits-count) + var(--line-number-padding) * 2 + var(--line-number-right-margin)) * -1);
}
.expansion {
position: relative;
display: inline;
}
.expansion .expanded {
display: none;
}
.expansion > label {
position: absolute;
left: -20px;
top: 0;
border: 1px solid #111;
border-radius: 4px;
cursor: pointer;
padding: 0 2px;
line-height: 20px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.expansion > input {
display: none;
}
</style>
</head>
<body>
<pre>
<code>
<a href=#20 id=20 data-nosnippet>20</a>bla
<a href=#21 id=21 data-nosnippet>21</a><span class=expansion><input id=expand-21 type=checkbox><label for=expand-21>↕</label> <span class=expanded>{
::std::io::_print(format_arguments::new_v1(<span class="kw-2">&</span>[<span class="string">"\n "</span>, <span class="string">"\n \n"</span>],
<span class="kw-2">&</span>[format_argument::new_display(<span class="kw-2">&</span>y)]));
}</span><span class=original><a class="macro" href="https://doc.rust-lang.org/nightly/std/macro.println.html">println!</a>(<span class="string">"
<a href=#22 id=22 data-nosnippet>22</a> {y}
<a href=#23 id=23 data-nosnippet>23</a> "</span>)</span></span>;
<a href=#24 id=24 data-nosnippet>24</a> <a href="#15">x</a>(
</code>
</pre>
</body>
</html>
This is a bug encountered while developping a new rustdoc feature: https://github.com/rust-lang/rust/pull/137229
Actual results:
The line numbers (the a[data-nosnippet elements) which are children of expansion are sometimes displayed correctly, and sometimes they're all at the top of the parent, stacking on each other.
Expected results:
The line number should all be on their own line all the time.
|
||
Comment 1•10 months ago
|
||
|
|
||
Updated•10 months ago
|
|
|
||
Comment 2•10 months ago
|
||
On Nightly137.0a1 Windowa11, I can reproduce the problem by switching the Page Style from Basic Page Style to No Style and back to Basic Page Style again.
|
||
Comment 3•10 months ago
|
||
Interesting, seems like some sort of odd interaction between whitespaces being preserved in absolute containing blocks.
In the attached testcase, since no inset is supplied, the .abs span should use the hypothetical (static) position, same as the .static span, but it ends up using the default upper-left position.
|
|
||
Updated•10 months ago
|
Description
•