Replay fix for Firefox — add <head> and <body> separately #1133
Conversation
… that (presumably) stylesheet rules are ready to be applied when the body appears
The css which triggered the bug was simply
{
margin-left: 220px;
transition: margin-left .448s;
}
…his file://, save the events to a html file, and then open the file in Firefox (without this PR applied)
🦋 Changeset detectedLatest commit: c7a8cd0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
eoghanmurray
changed the title
|
Repro: open this link in a firefox browser. Source HTML for reproduction. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>transition</title>
<style>
div {
width:400px;
height:400px;
margin-left:400px;
background-color:red;
transition:margin-left 20s;
}
</style>
</head>
<body>
<!-- transition shouldn't apply upon rebuild -->
<div></div>
</body>
</html> |
|
I've no idea how this fixes the problem. I've created a bug report for Firefox here: |
|
@YunFeng0817 wondering whether we need to also apply this fix when rebuilding a diff via rrdom, but I can't pinpoint the bit of code in rrdom that applies the diff... do you have any pointers? |
Also easier to understand Co-authored-by: Yun Feng <[email protected]>
eoghanmurray
force-pushed
the
firefoxReplayHeadStyle
branch
from
e5e99de
to
06ddf13
Compare
This PR solves a problem in Firefox where css transitions are incorrectly being applied upon rebuild. Presumably FF doesn't finished parsing the styles in time, and applies e.g. a default margin:0 to elements which have a non-zero margin set in CSS, along with a transition on them.
I've included a test file which can't be automated at the moment as we use Chrome for repl and live-stream.
To recreate, you'd need to make a
replrecording against the transition.html file, save the events to html and then open the file in Firefox (without this PR applied). You'll see the red box very slowly move across the screen, which is incorrect as the styles never had a transition from margin-left:0 to margin-left:400px — it was at the latter from initial page load.