Closed Bug 1816672 Opened 3 years ago Closed 2 years ago

Transitions incorrectly apply upon first render when programmatically building an iframe document

Categories

(Core :: CSS Transitions and Animations, defect, P3)

Product:
Core
Component:
CSS Transitions and Animations
Version:
Firefox 109
Platform:
Desktop
All
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
112 Branch
Tracking Flags:
Tracking Status
firefox-esr102 --- wontfix
firefox110 --- wontfix
firefox111 --- wontfix
firefox112 --- fixed

People

(Reporter: eoghan, Assigned: emilio)

Details

Attachments

(3 files)

transition.html
475 bytes, text/html
Details
reduced test-case.
577 bytes, text/html
Details
Bug 1816672 - Deal with async root element insertions in layout. r=#layout,tnikkel,dholbert
48 bytes, text/x-phabricator-request
Details | Review
Attached file transition.html —

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0

Steps to reproduce:

rrweb is a tool which records and replays web sessions.
The replay side of things rebuilds the original webpage programmatically for display within an iframe.
An rrweb-minimal test case for this bug is here:
https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.githubusercontent.com%2FYunFeng0817%2F66c6c742c619812d00cabd10f0f3de6a%2Fraw%2F5a09ceafa3d13baec07d944290c10f9245fd6a8d%2Frepro-firefox-bug-%2525231133.json&version=1.0.0-alpha.4&play=on

Actual results:

The red square slides across the screen for 20 seconds

Expected results:

The red square should have been in it's final position from the beginning.

Chrome has the correct behaviour, and the correct behaviour can be seen by opening the attached file as a simple HTML file, or indeed as the src of an iframe.

The bug is manifest when the DOM for the iframe is built up programmatically using javascript and appended to the document in one go.

The following workaround fixes it for rrweb:
https://github.com/rrweb-io/rrweb/pull/1133/files
In that pull request, the <head> and <body> are appended in two steps, which for some reason solves the issue.

I can confirm that the testlink reproduces the said behavior in all the latest versions of the 4 channels in Windows 10, Mac OS 11 and Ubuntu 22, while an expected behavior can be observed in chrome.
Furthermore, the non-iframe test does not reproduce an issue, confirming that this only occurs if the transition is in an iframe.

Status: UNCONFIRMED → NEW
status-firefox110: --- → affected
status-firefox111: --- → affected
status-firefox112: --- → affected
status-firefox-esr102: --- → affected
Component: Untriaged → CSS Transitions and Animations
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → Desktop

The severity field is not set for this bug.
:emilio, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(emilio)

I see what's going on... The issue is that we construct the root frame synchronously on insertion, see stack:

#0  style::gecko::wrapper::{impl#13}::ensure_data (self=0x7ffc747df338) at servo/components/style/gecko/wrapper.rs:1385
#1  0x00007fc900ab9730 in style::gecko::traversal::{impl#1}::process_preorder<style::driver::traverse_dom::{closure_env#0}<style::gecko::wrapper::GeckoElement, style::gecko::traversal::RecalcStyleOnly>> (self=<optimized out>, traversal_data=0xe4, context=0x7fc8f0e1ad30, node=..., note_child=...) at servo/components/style/gecko/traversal.rs:36
#2  0x00007fc900aac1fc in style::driver::traverse_dom<style::gecko::wrapper::GeckoElement, style::gecko::traversal::RecalcStyleOnly> (traversal=0x7fc8ee0568a0, token=..., pool=...)
    at servo/components/style/driver.rs:112
#3  0x00007fc900a45654 in geckoservo::glue::traverse_subtree
    (element=..., global_style_data=<optimized out>, per_doc_data=0x7fc8f04b4008, guard=0x7ffc747dfa00, traversal_flags=..., snapshots=0x7fc8ee092fd8) at servo/ports/geckolib/glue.rs:289
#4  0x00007fc900a4594e in geckoservo::glue::Servo_TraverseSubtree (root=<optimized out>, raw_data=<optimized out>, snapshots=0x7fc8ee092fd8, raw_flags=<optimized out>)
    at servo/ports/geckolib/glue.rs:349
#5  0x00007fc8fce6c8a4 in mozilla::ServoStyleSet::StyleNewSubtree(mozilla::dom::Element*) (this=0x7fc8f3eb4a00, aRoot=0x7fc8f0e1aa60)
    at /home/emilio/src/moz/gecko-3/layout/style/ServoStyleSet.cpp:898
#6  0x00007fc8fcf17a3f in nsCSSFrameConstructor::ConstructDocElementFrame(mozilla::dom::Element*) (this=this@entry=0x7fc8f09b1b80, aDocElement=aDocElement@entry=0x7fc8f0e1aa60)
    at /home/emilio/src/moz/gecko-3/layout/base/nsCSSFrameConstructor.cpp:2359
#7  0x00007fc8fcf22de7 in nsCSSFrameConstructor::ContentRangeInserted(nsIContent*, nsIContent*, nsCSSFrameConstructor::InsertionKind)
    (this=0x7fc8f09b1b80, aStartChild=0x7fc8f0e1aa60, aEndChild=0x0, aInsertionKind=nsCSSFrameConstructor::InsertionKind::Async)
    at /home/emilio/src/moz/gecko-3/layout/base/nsCSSFrameConstructor.cpp:6883
#8  0x00007fc8fcede526 in mozilla::PresShell::ContentInserted(nsIContent*) (this=<optimized out>, aChild=0x7fc8f0e1aa60) at /home/emilio/src/moz/gecko-3/layout/base/PresShell.cpp:4541
#9  0x00007fc8fa5dd2a5 in mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*)::$_14::operator()(mozilla::PresShell*) const
    (aPresShell=0x7fc8ee0568a0, this=<optimized out>) at /home/emilio/src/moz/gecko-3/dom/base/MutationObservers.cpp:184
#10 Notify<(IsRemoval)0, (ShouldAssert)1, mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*)::$_14, mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*)::$_15>(nsINode*, mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*)::$_14&, mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*)::$_15&) (aNode=<optimized out>, aNotifyPresShell=<optimized out>, aNotifyObserver=<optimized out>) at /home/emilio/src/moz/gecko-3/dom/base/MutationObservers.cpp:97
#11 mozilla::dom::MutationObservers::NotifyContentInserted(nsINode*, nsIContent*) (aContainer=<optimized out>, aChild=0x7fc8f0e1aa60)
    at /home/emilio/src/moz/gecko-3/dom/base/MutationObservers.cpp:185
#12 0x00007fc8fa6a287d in nsINode::InsertChildBefore(nsIContent*, nsIContent*, bool, mozilla::ErrorResult&)
    (this=0x7fc8f3e48400, aKid=0x7fc8f0e1aa60, aBeforeThis=0x0, aNotify=true, aRv=...) at /home/emilio/src/moz/gecko-3/dom/base/nsINode.cpp:1618
#13 0x00007fc8fa55342b in mozilla::dom::Document::InsertChildBefore(nsIContent*, nsIContent*, bool, mozilla::ErrorResult&)
    (this=0x7fc8f3e48400, aKid=0x7fc8f0e1aa60, aBeforeThis=0x0, aNotify=true, aRv=...) at /home/emilio/src/moz/gecko-3/dom/base/Document.cpp:7171
#14 0x00007fc8fa6a5eb5 in nsINode::ReplaceOrInsertBefore(bool, nsINode*, nsINode*, mozilla::ErrorResult&)
    (this=0x7fc8f3e48400, aReplace=false, aNewChild=0x7fc8f0e1aa60, aRefChild=0x0, aError=...) at /home/emilio/src/moz/gecko-3/dom/base/nsINode.cpp:2833
#15 0x00007fc8faad5a67 in nsINode::InsertBefore(nsINode&, nsINode*, mozilla::ErrorResult&) (this=0x7fc8f3e48400, aNode=..., aChild=0x0, aError=...)
    at /home/emilio/src/moz/gecko-3/dom/base/nsINode.h:2069
#16 nsINode::AppendChild(nsINode&, mozilla::ErrorResult&) (this=0x7fc8f3e48400, aNode=..., aError=...) at /home/emilio/src/moz/gecko-3/dom/base/nsINode.h:2076
#17 mozilla::dom::Node_Binding::appendChild(JSContext*, JS::Handle<JSObject*>, void*, JSJitMethodCallArgs const&) (cx_=<optimized out>, obj=Traceback (most recent call last):
Assignee: nobody → emilio
Attached file reduced test-case. —

This would've been extra-useful fwiw ;)

Attachment #9321047 - Attachment description: WIP: Bug 1816672 - Deal with async root element insertions in layout. → Bug 1816672 - Deal with async root element insertions in layout. r=#layout,tnikkel,dholbert
Flags: needinfo?(emilio)
Severity: -- → S3
Priority: -- → P3
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/72ec1003e456 Deal with async root element insertions in layout. r=dshin
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/38879 for changes under testing/web-platform/tests

https://hg.mozilla.org/mozilla-central/rev/72ec1003e456

Status: NEW → RESOLVED
Closed: 2 years ago
status-firefox112: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → 112 Branch

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval.
  • If no, please set status-firefox111 to wontfix.

For more information, please visit auto_nag documentation.

Flags: needinfo?(emilio)

We've shipped this for a while, and it's not the trivialest of fixes, probably worth letting it ride the trains.

status-firefox111: affected → wontfix
Flags: needinfo?(emilio)
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: