Unable to reproduce this issue on reported version 65.0.3325.181 and latest canary 67.0.3394.0 using Mac 10.13.3 with below steps.

1. Visited colloq.io and helloanselm.com
2. Inspected and opened Performance tab, recorded trace and didn't observe any repaint. Attaching videos of same.

@Reporter: Please check the video and let us know if we miss anything. Also please check the issue on fresh profile which do not have any apps/extensions and by resetting all flags to default in chrome://flags.

Thanks!

Deleted: 831590.mp4 7.7 MB

	831590.mp4 7.7 MB View Download

sindhu.chelamcherla@ simply reload the page and you'll see the text size animation in bad builds.

Bisect info: 521239 (good) - 521245 (bad)
https://chromium.googlesource.com/chromium/src/+log/3a13f63d..5bf3c52c?pretty=fuller
Suspecting r521240 = b71f5b7df345f1a8603b7cf7b59edf48288e7d96 = https://crrev.com/c/765097 by nainar@chromium.org
"Remove calls to styleForLayoutObject() in LayoutTreeBuilder::style()"
Landed in 65.0.3285.0

sindhu.chelamcherla@chromium.org:

Thanks for your feedback. I retried with a fresh profile on latest Canary. See the demo video that I created that shows the problem again.

Deleted: Kapture 2018-04-12 at 11.03.23.mp4 2.3 MB

	Kapture 2018-04-12 at 11.03.23.mp4 2.3 MB View Download

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

@futhark: since it has a bisect to M65, marked as P1 to fix for M67.
Hopefully the fix is simple.

Able to reproduce this issue on latest stable 65.0.3325.181, on latest beta 66.0.3359.81 and latest canary 67.0.3395.0 using Windows 10, Mac 10.13.3 and Ubuntu 14.04.

Good Build: 65.0.3284.0
Bad Build: 65.0.3285.0.

As bisect is provided in comment#4 removing Needs-Bisect label and adding OS labels.

Thanks!

Reproduces with locally built chrome target, but not content_shell.

The reason why it's different in chrome and content_shell is that the autofill code triggers style and layout update ignoring pending sheets in chrome.

Attached minimized test-case.

Deleted: colloq.html 111 bytes

colloq.html 111 bytes View Download

Deleted: colloq.css 48 bytes

colloq.css 48 bytes View Download

The bisect is wrong. I did a bisect between 510000 and 521245 with the minimized test. All builds were bad.

So, the bisect is probably correct for the full site, but the underlying problem is older.

Bisect in #c4 is correct for the originally reported https://colloq.io
In r521239 there's no animation on page reload, but in r521245 it's present.

Bisect for colloq.html: 266467 (good) - 266488 (bad)
https://chromium.googlesource.com/chromium/src/+log/b20f6ac1..1c10f90f?pretty=fuller
Two autofill related commits:
9205af997ead2ed499fdd7e575c27fcb4b9062e7 "Password manager: introduce logging for the internals page"
092900dea6e8b388fa4075117c79f42654618cda "rAc: autofill invalid phone numbers"
Landed in 36.0.1963.0

This would work out of the box if issue 521692 is fixed. The fact that we update style and layout while waiting for rendering blocking stylesheets is what's causing this issue in the first place.

Some observations:

* autofill is asking us to update style/layout when the document is parsed but while we still are waiting for rendering blocking stylesheets. That sounds bad. I'd expect the autofill code to wait for us to be rendering ready.

* The animations/transitions code trigger on computed style changes between style/layout calculated while render blocking stylesheet is loading and after the sheet has been loaded. Fixing that requires extending the ignore-pending-stylesheets hack that we want to get rid of with 521692.

I have not found out which combinations of circumstances which caused the difference for the site in question after the Squad changes.

Able to reproduce this issue with attached .html and .css files in comment#10. Animation is seen on opening html file. (NOTE: In Firefox no animation is seen). This issue is seen from M-60. Generally TE team consider issues from M-60 as Non-Regression.

But when checked for https://colloq.io/ issue is broken in M65 as mentioned in comment#5. Hence removing Needs-Bisect label.

@futhark: Please feel free to add Needs-Bisect label label or TestConfirmation if this requires any triage from TE end.

Thanks!

Adding a wrapper element which changes display type as the sheet is applied is what's needed to trigger the regression for colloq.io:


<!DOCTYPE html>
<link href="colloq.css" rel="stylesheet">
<div>
  <span>Should not animate</span>
</div>
<form><input></form>

colloq.css:

span { transition: all 1s; margin-left: 10em; }
div { display: flex }

Here's a demo showing the difference with the style recalc for re-attachment:

<!DOCTYPE html>
<style>
  #trans { transition: all 1s }
  .margin { margin-left: 100px }
  .flex { display: flex }
</style>
<div id="flex">
  <div id="trans">Margin?</div>
</div>
<script>
  setTimeout(() => {
    flex.className = "flex";
    trans.className = "margin";
  }, 1000);
</script>

Triggering a transition here is actually a bug-fix (also matches Firefox). Previously we would not see a transition here because the old computed style for #trans would be gone with DetachLayoutTree for #flex. Now that we are recalculating style for the subtree before DetachLayoutTree, we are able to trigger transitions correctly when elements change display type between non-"none" types.

So, my conclusion is that:

* We should not revert any changes introduced in https://chromium-review.googlesource.com/c/chromium/src/+/765097
* There are three ways to fix this:
  1. Fix the autofill code to wait until we get the first rendering to avoid the ignore-pending-sheets hack.
  2. Get rid of the ignore-pending-sheets hack which is issue 521692 (autofill would probably stop working in its current form if we did).
  3. Patch the ignore-pending-sheets hack to not trigger transitions if the previous style recalc ignored pending sheets.

Alternative 3 is probably the least amount of work, but adding more to this hack sounds meh.

Seems the autofill code tries to find forms to fill in different listener apis and not ignoring pending sheets in WebNode::IsFocusable() do not cause test regreesions:

https://chromium-review.googlesource.com/c/chromium/src/+/1019401

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a224621bcd4eed3aa14deca4bad07677bde0796f

commit a224621bcd4eed3aa14deca4bad07677bde0796f
Author: Rune Lillesveen <futhark@chromium.org>
Date: Mon Apr 23 17:50:39 2018

WebNode::IsFocused() should not ignore pending sheets.

The autofill code is calling IsFocused while pending stylesheets are
loading. That doesn't mean we should decide the focusability of the
form element at that point in time ignoring pending stylesheets as the
pending sheets are blocking rendering.

This fixes the incorrect triggering of transitions in 831590.

Bug:  831590 
Change-Id: Ie041014bdcd4ba74f774919718e9fc3fc4540c6b
Reviewed-on: https://chromium-review.googlesource.com/1019401
Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#552746}
[modify] https://crrev.com/a224621bcd4eed3aa14deca4bad07677bde0796f/third_party/blink/renderer/core/exported/web_node.cc
[modify] https://crrev.com/a224621bcd4eed3aa14deca4bad07677bde0796f/third_party/blink/renderer/core/exported/web_node_test.cc

[Auto-generated comment by a script] We noticed that this issue is targeted for M-67; it appears the fix may have landed after branch point, meaning a merge might be required. Please confirm if a merge is required here - if so add Merge-Request-67 label, otherwise remove Merge-TBD label. Thanks.

Cl listed at #20 will need a merge to M67, pls request a merge once change is baked/verified in canary and safe to merge?

As this was regressed in M65, we can take this change to M67 only if it is fully safe to merge. Thank you.

Re-opening for M67 merge process.

M67 Stable promotion is coming soon. Your bug is labelled as Stable ReleaseBlock, pls make sure to land the fix and request a merge into the release branch ASAP. Thank you.

@govind: I did land a fix and did request the merge. I don't know why the bug was re-opened. I thought the process was: fix on master, close bug, wait for Canary, request merge.

Removing "Merge-TBD" as "Merge-Request-67" is already applied.

Your change meets the bar and is auto-approved for M67. Please go ahead and merge the CL to branch 3396 manually. Please contact milestone owner if you have questions.
Owners: cmasso@(Android), cmasso@(iOS), kbleicher@(ChromeOS), govind@(Desktop)

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Pls merge your change to M67 branch 3396 ASAP so we can pick it up for next M67 beta release. Thank you.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6e10b6ed79b8318038972892ba0d8c5becaec931

commit 6e10b6ed79b8318038972892ba0d8c5becaec931
Author: Rune Lillesveen <futhark@chromium.org>
Date: Wed Apr 25 21:19:08 2018

WebNode::IsFocused() should not ignore pending sheets.

The autofill code is calling IsFocused while pending stylesheets are
loading. That doesn't mean we should decide the focusability of the
form element at that point in time ignoring pending stylesheets as the
pending sheets are blocking rendering.

This fixes the incorrect triggering of transitions in 831590.

Bug:  831590 
Change-Id: Ie041014bdcd4ba74f774919718e9fc3fc4540c6b
Reviewed-on: https://chromium-review.googlesource.com/1019401
Reviewed-by: Mathieu Perreault <mathp@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#552746}(cherry picked from commit a224621bcd4eed3aa14deca4bad07677bde0796f)
Reviewed-on: https://chromium-review.googlesource.com/1028691
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/branch-heads/3396@{#308}
Cr-Branched-From: 9ef2aa869bc7bc0c089e255d698cca6e47d6b038-refs/heads/master@{#550428}
[modify] https://crrev.com/6e10b6ed79b8318038972892ba0d8c5becaec931/third_party/blink/renderer/core/exported/web_node.cc
[modify] https://crrev.com/6e10b6ed79b8318038972892ba0d8c5becaec931/third_party/blink/renderer/core/exported/web_node_test.cc