Issue 516550 - chromium - FOUC prevention shouldn't give back bogus answers during attachment inside imports - An open-source project to help move the web forward.

Issue 516550:	FOUC prevention shouldn't give back bogus answers during attachment inside imports
	2 people starred this issue and may be notified of changes.	Back to list

Status:	Available
Owner:	esprehn@chromium.org
Cc:	leviw@chromium.org, esprehn@chromium.org, o...@chromium.org, mikelawt...@chromium.org, sh...@chromium.org, tim...@chromium.org
Type-Bug Pri-2 Cr-Blink-WebComponents OS-All hotlist-toolkit

Project Member Reported by sorv...@chromium.org, Aug 3, 2015

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.

reduction.zip
1.5 KB Download

Aug 4, 2015

#1 sorv...@chromium.org

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

Aug 4, 2015

#2 leviw@chromium.org

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.

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)
Cc: o...@chromium.org

Aug 4, 2015

#3 sorv...@chromium.org

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

Aug 4, 2015

#4 dominicc@chromium.org

Tentatively esprehn?

Status: Available
Owner: esprehn@chromium.org

Aug 4, 2015

#5 leviw@chromium.org

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

Cc: mikelawt...@chromium.org sh...@chromium.org

Aug 4, 2015

#6 mikelawt...@chromium.org

(No comment was entered for this change.)

Cc: tim...@chromium.org

Aug 5, 2015

#7 tkent@chromium.org

(No comment was entered for this change.)

Labels: -Cr-Blink Cr-Blink-WebComponents

► Sign in to add a comment