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.
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.)
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.
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.
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.
I think this might be fixed by bug 1367278.
Chris, could you please double check this issue does not happen on the latest nightly (20170722112649)?
(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.