stylo: some Google Drive context menu items are missing

RESOLVED FIXED

Status

()

Core
CSS Parsing and Computation
P1
normal
RESOLVED FIXED
15 days ago
11 hours ago

People

(Reporter: cpeterson, Assigned: bradwerth)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

15 days ago
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.
Assignee: nobody → bwerth
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.
(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.
CCing animation people.  Thank you Brad for the great analysis!
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.)
Flags: needinfo?(bwerth)
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.
Flags: needinfo?(bwerth)
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.
Duplicate of this bug: 1381861
Created attachment 8887574 [details]
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.
Created attachment 8887690 [details]
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.
Attachment #8887574 - Attachment is obsolete: true
I think this might be fixed by bug 1367278.
I've confirmed that the patch for bug 1367278 fixes this issue.
Depends on: 1367278
Chris, could you please double check this issue does not happen on the latest nightly (20170722112649)?
Flags: needinfo?(cpeterson)
(Reporter)

Comment 13

11 hours ago
(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.
Status: NEW → RESOLVED
Last Resolved: 11 hours ago
Flags: needinfo?(cpeterson)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.