New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 521692
Closed: May 2016
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Sign in to add a comment

Issue 516550: FOUC prevention shouldn't give back bogus answers during attachment inside imports

Reported by, Aug 4 2015 Project Member

Issue description

Version: 46.0.2464.0 canary

What steps will reproduce the problem?
1. load an HTMLImport that defines a custom element that queries its `offsetParent` in `attachedCallback`
2. make an instance of the custom element in the body

What is the expected output? What do you see instead?

The element should report its offsetParent as <body>. Instead, the offsetParent is null. 

In addition, if the body has style="position: relative;", the element sees this with getComputedStyle as position static. By the time of the import's load event, the expected information is reported.

See the attached reduction's console output.
1.5 KB Download

Comment 1 by, Aug 4 2015

Here's an explanation of what the reduction is expected to demonstrate.

1. `offsetParent.html` should be opened in Chrome. It loads an HTMLImport `offsetParent-import.html`
2. `offsetParent-import.html` contains a `<script>` which defines a `some-thing` custom element. The `some-thing` element logs to the console in its `createdCallback` and calls a `report` method in its `attachedCallback`. The `report` method logs to the console the element's offsetParent and its parentNode's computed position.
3. `offsetParent.html` contains an instance of `<some-thing>` inside `<body>`.

Based on this, the console shows the unexpected behavior:

some-thing created
some-thing report
  offsetParent is null
  parentNode <body style=​"position:​ relative;​">​…​</body>​ has position static

At attached time, we expect the `some-thing` element to report that `<body>` is its `offsetParent` and that body has a computed position of `relative`.

4. The reduction also has an `onload` handler for the HTMLImport which re-calls `<some-thing>`'s `report` method. This demonstrates that after the HTMLImport has loaded, we *do* get the expected result.

import loaded
some-thing report
  offsetParent is <body style=​"position:​ relative;​">​…​</body>​
  parentNode <body style=​"position:​ relative;​">​…​</body>​ has position relative

Comment 2 by, Aug 4 2015

Summary: FOUC prevention shouldn't give back bogus answers during attachment inside imports (was: Custom element defined in HTMLImport gets incorrect offsetParent and getComputedStyle data in attachedCallback)
We're returning answers based on a style recalc that treats everything as display: none while loading.

esprehn, word on the street is you have an idea in your head around how this should work. It'd be nice to have that attached to this.

Comment 3 by, Aug 4 2015

Fwiw, the workaround that Polymer will use for this issue is slight sugar around calling `requestAnimationFrame` in `attachedCallback`.

Comment 4 by, Aug 5 2015

Status: Available
Tentatively esprehn?

Comment 5 by, Aug 5 2015

Ultimately, it may make sense to have someone on the style team own it.

Comment 6 by, Aug 5 2015


Comment 7 by, Aug 6 2015

Labels: -Cr-Blink Cr-Blink-WebComponents

Comment 8 by, May 6 2016

Labels: -hotlist-toolkit hotlist-Toolkit
Mergedinto: 521692
Status: Duplicate (was: Available)

Sign in to add a comment