1390496 - stylo: Greensock documentation website's side panel flickers and is wrong size

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect, P1)

Description

[Dan Callahan [:callahad]]

Attachment: stylo-greensock.mp4

(See attached screencast)

STR:

1. Visit https://greensock.com/docs/
2. Navigate in the lefthand panel (TweenLite -> Back to Docs Home -> TweenLite -> Back to Docs Home)

Without Stylo:

- The panel remains a constant width and transitions smoothly between states

With Stylo:

- The panel rapidly flickers during the transition
- The panel content is mis-sized and does not fill its container

I can reliably reproduce this on Windows, macOS, and Linux.

Comment 1

[Dan Callahan [:callahad]]

Attachment: stylo-greensock.png

Screenshot of broken state

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Seems to be related animation.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Attachment: A reduced case zip

Though I am trying to create a reduced test case based on the site, it seems that any animations are not involved with.  It's somewhat related to calc() value.

Attaching zip includes a reduced test case (but still lots of scripts there).

Comment 4

[Bobby Holley (:bholley)]

Since it seems calc-related and not animation-related, I asked Nazim to take a look so that hiro can focus on animation stuff.

Hiro, let me know if you got further with your investigations since comment 3 and would like to continue it instead of having Nazim take over.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Happy to leave this bug.:)  FWIW, though Nazim might notice already, on Stylo the width of the element in question is calc(98px), whereas on Gecko the width if calc(100% - 2px).

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Just an hypotheses, but consider the following test-case:

<div style="width: calc(100% - 2px)"></div>
<script>alert(document.querySelector('div').style.width)</script>

Gecko and Chromium:

 * calc(100% - 2px)

(Note that Gecko and Chromium aren't compatible in more complex examples)

Stylo:

 * calc(-2px + 100%)

I _suspect_ the page is parsing it and changing the order is just freaking them a lot.

Also, look that we do something slightly fishy (not incorrect though!):

<div style="width: calc(2px - 100%)"></div>
<script>alert(document.querySelector('div').style.width)</script>

Stylo alerts "calc(2px + -100%)", which is super-weird...

So I'd try first fixing the second case (and similar ones), and adding tests for them. If that happens to not be enough, I'd guess we need to s/CalcLengthOrPercentage/CalcNode/ or something like that, which would be slightly unfortunate, but probably ok.

If this happens not to be the bug, we need to file a bug on this stuff.

Comment 7

[Nazım Can Altınova [:canova][:canaltinova on phabricator]]

Yes, this is about the order. I tried to simply workaround the issue with swapping printing orders and it seems working like that. I filed bug 1391120 for the other one.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Should be fixed in latest nightly, which should include https://github.com/servo/servo/pull/18131.

Comment 9

[Darkspirit]

Looks good, so far. Can't reproduce with Nightly 57 x64 20170820100343 @ Debian Testing.

Comment 10

[Darkspirit]

Verified in comment 9