New issue
Advanced search Search tips

Issue 809172 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Feb 2018
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

adding/removing absolute element causes reflow of ancestors

Reported by alec.sta...@gmail.com, Feb 5 2018 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Steps to reproduce the problem:
1. Unzip and open index.html
2. Record performance with Developer Tools
3. Notice layout event all the way up to #document when the brown squares are added or removed

What is the expected behavior?
If an ancestor has a static size or "overflow: hidden", its children should not cause reflows to occur for that ancestor.

In other cases, I assume it's necessary because the child may affect the ancestor's boundary box, even if it's absolutely positioned.

What went wrong?
The "Layout" events in Developer Tools say that the "Layout root" is #document, which means an unnecessary reflow occurred.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 64.0.3282.140  Channel: stable
OS Version: OS X 10.13.0
Flash Version:
chrome-absolute.zip
1.4 KB Download

Comment 1 by alec.sta...@gmail.com, Feb 5 2018 

Some notes:
- Setting "transform: translateZ(0)" on the .abs-parent does nothing
- Setting a static width & height on the .abs-parent does nothing

Comment 2 by e...@chromium.org, Feb 5 2018

Status: WontFix (was: Unconfirmed)
One cannot make assumptions about the effect to rest of the document based solely on overflow hidden. 

This is what CSS Contain [1] aims to address.


1: https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Comment 3 by alec.sta...@gmail.com, Feb 5 2018 

Okay, but shouldn't static width & height of the parent prevent any reflows?

Comment 4 by alec.sta...@gmail.com, Feb 5 2018 

To clarify on my last comment, a parent with a static width & height shouldn't need a reflow if an absolute child element is added, right?
►

Sign in to add a comment