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

jdm added A-layout/uncategorized A-layout/2020 C-has-manual-testcase labels May 12, 2020

servo / servo

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

servo / servo

Join GitHub today

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

jdm commented May 12, 2020 •

edited

mrobinson commented May 14, 2020 •

edited