1379553 - stylo: some Google Drive context menu items are missing

Status: RESOLVED FIXED

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

Description

[Chris Peterson [:cpeterson]]

STR:
1. Load a Google Drive folder, such as https://drive.google.com/drive/u/0/folders/0B2A4dciB6g1cbGxWdnIwNU5obUk
2. Right-click on a Google Doc in the folder to open the context menu.
3. Mouse-over the context menu's "Open with" sub-menu.

RESULT:
When Stylo is enabled, the context menu's "Remove" menu item is missing, the "Download" menu item's text is faded, and the "Open with" sub-menu is empty (instead of showing "Google Sheets").

I am testing Stylo in Nightly 56.0a1 (2017-07-09) on Windows 10.

Comment 1

[Brad Werth [:bradwerth]]

The relevant property which is displaying poorly is:

background: rgba(0, 0, 0, 0) linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%) repeat scroll 0% 0%;

Could possibly be reduced further. Will build a reftest.

Comment 2

[Brad Werth [:bradwerth]]

(In reply to Brad Werth [:bradwerth] from comment #1)
> The relevant property which is displaying poorly is:
> 
> background: rgba(0, 0, 0, 0) linear-gradient(rgba(255, 255, 255, 0) 0%,
> rgb(255, 255, 255) 50%) repeat scroll 0% 0%;

The actual problem appears to be that the gradient is not animated away as it should be. Still isolating the specific animation styles.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

CCing animation people.  Thank you Brad for the great analysis!

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Hi Brad, are you still working on this? (It's assigned to you and comment 2 suggests you are, but I didn't see it in your recent mail to stylo-team so I thought I'd check.)

Comment 5

[Brad Werth [:bradwerth]]

I haven't made much progress recently -- still working to reduce a testcase. I believe it to be due to some combination of animation styles and ::after pseudo-element content. Feel free to reassign the bug, as I'm unlikely to solve it before my upcoming time off.

Comment 6

[Brad Werth [:bradwerth]]

If I am correct that this problem is due to animation/transition styles not working well with pseudo-elements, then Bug 1381670 has a simplified testcase.

Comment 8

[Brad Werth [:bradwerth]]

Attachment: linear-gradient.html

Getting closer. Steps to Reproduce:

1) Load the testcase. After the animation of the white gradient, you will see the expected blue rectangle.
2) Open the devtools panel.
3) Reload. After the animation, the white gradient will pop back in on top of the blue rectangle.

On the actual Google Drive site, this unexpected behavior happens even when devtools panel is not open.

Comment 9

[Brad Werth [:bradwerth]]

Attachment: animated-z-index-after.html

Reduced further to a forwards animated z-index property on an ::after pseudo-element. Steps to reproduce:

1) Load the testcase. The red rectangle will change to a blue rectangle.
2) Open Devtools Inspector or Style Editor (other panels will not trigger bug). The blue rectangle will incorrectly change back to a red rectangle.

Again, on Google Drive, the incorrect behavior is observed during normal site navigation, not linked to use of Devtools.

Comment 10

[Hiroyuki Ikezoe (:hiro)]

I think this might be fixed by bug 1367278.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

I've confirmed that the patch for bug 1367278 fixes this issue.

Comment 12

[Hiroyuki Ikezoe (:hiro)]

Chris, could you please double check this issue does not happen on the latest nightly (20170722112649)?

Comment 13

[Chris Peterson [:cpeterson]]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #12)
> Chris, could you please double check this issue does not happen on the
> latest nightly (20170722112649)?

Yep! The context menus work correctly for me in build 2017-07-23. I will resolve this bug as fixed by bug 1367278.