Absolutely positioned block inside of relatively positioned block with overflow is invisible #26500

jdm · 2020-05-12T21:09:11Z

<style>
#inner {
  width: 100;
  height: 100;
  background-color: green;
  position: absolute;
}
#viewer {
  position: relative;
  width: 100%;
  overflow: auto;
  height: 100%;
}
</style>
<div id="viewer"><div id="inner"></div></div>

In Firefox this displays a 100x100 green box; in Servo I get a white page in both layout 2013 and layout 2020. Commenting out any of the properties makes the box appear.

I believe this is a layout bug that makes the model viewer invisible on Sketchfab, based on reducing the contents of https://sketchfab.com/3d-models/soviet-tape-recorder-vesna-207-32ee8d86fe504f09ba4a2f017d653828.

jdm · 2020-05-12T21:27:51Z

To make matters slightly more confusing, the following testcase does not use quirks mode and passes in layout 2020 but fails in layout 2013:

<!doctype html>
<style>
#viewer-container {
  position: relative;
  padding-top: 50%;
}
#viewer-viewport {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
#viewer {
  overflow: hidden;
}
#inner {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>
<div id="viewer-container">
<div id="viewer-viewport">
<div id="viewer">
<span id="inner"></span>
</div>
</div>
</div>

mrobinson · 2020-05-14T12:09:44Z

The issue here seems to be the calculation of height: 100% on the container. The reason that this only shows up when using overflow: auto is because scroll frames also clip their content. I've included a dump of the fragment tree which demonstrates the issue. Note how the second and third boxes have zero height.

┌ Fragment Tree
│  ├─ Box
│  │         content=Rect(i1024×b8 @ (i0,b0))
│  │         padding rect=Rect(i1024×b8 @ (i0,b0))
│  │         border rect=Rect(i1024×b8 @ (i0,b0))
│  │         scrollable_overflow=Rect(1024.0 pxx8.0 px at (0.0 px, 0.0 px))
│  │         overflow=Visible / Visible
│  │         style=0x7f98e0e5b740
│  │  ├─ Box
│  │  │         content=Rect(i1008×b0 @ (i8,b8))
│  │  │         padding rect=Rect(i1008×b0 @ (i8,b8))
│  │  │         border rect=Rect(i1008×b0 @ (i8,b8))
│  │  │         scrollable_overflow=Rect(1008.0 pxx0.0 px at (8.0 px, 8.0 px))
│  │  │         overflow=Visible / Visible
│  │  │         style=0x7f98e0e5ba40
│  │  │  ├─ Box
│  │  │  │         content=Rect(i1008×b0 @ (i0,b0))
│  │  │  │         padding rect=Rect(i1008×b0 @ (i0,b0))
│  │  │  │         border rect=Rect(i1008×b0 @ (i0,b0))
│  │  │  │         scrollable_overflow=Rect(1008.0 pxx0.0 px at (0.0 px, 0.0 px))
│  │  │  │         overflow=Auto / Auto
│  │  │  │         style=0x7f98e0e5bbc0
│  │  │  │  ├─ AbsoluteOrFixedPositionedFragment
│  │  │  │  ├─ Box
│  │  │  │  │         content=Rect(i100×b100 @ (i0,b0))
│  │  │  │  │         padding rect=Rect(i100×b100 @ (i0,b0))
│  │  │  │  │         border rect=Rect(i100×b100 @ (i0,b0))
│  │  │  │  │         scrollable_overflow=Rect(100.0 pxx100.0 px at (0.0 px, 0.0 px))
│  │  │  │  │         overflow=Visible / Visible
│  │  │  │  │         style=0x7f98e0e5bd40

mrobinson · 2023-12-20T13:59:44Z

Based on my reading of the Quirks Mode Spec the problem here is lack of implementation of:

jdm added A-layout/uncategorized A-layout/2020 https://github.com/servo/servo/wiki/Layout-2020 C-has-manual-testcase labels May 12, 2020

jdm added this to To do in Useful layout issues via automation Mar 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Absolutely positioned block inside of relatively positioned block with overflow is invisible #26500

Absolutely positioned block inside of relatively positioned block with overflow is invisible #26500

jdm commented May 12, 2020 •

edited

jdm commented May 12, 2020

mrobinson commented May 14, 2020 •

edited

mrobinson commented Dec 20, 2023 •

edited

Absolutely positioned block inside of relatively positioned block with overflow is invisible #26500

Absolutely positioned block inside of relatively positioned block with overflow is invisible #26500

Comments

jdm commented May 12, 2020 • edited

jdm commented May 12, 2020

mrobinson commented May 14, 2020 • edited

mrobinson commented Dec 20, 2023 • edited

jdm commented May 12, 2020 •

edited

mrobinson commented May 14, 2020 •

edited

mrobinson commented Dec 20, 2023 •

edited