1189702 - CSS animation re-run when a link is clicked

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect)

Description

[u545488]

Attachment: off-canvas-navigation-1.html

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20150730030208

Steps to reproduce:

I have created a web page (attached) with an off-canvas navigation panel.

To reproduce: 

Open the attached HTML file in Firefox or Nightly on Windows 8. Resize the browser window to less than 900px wide. Click the hamburger icon in the top-right corner. The off-canvas panel will reveal. 

Next, click any of the navigation links inside the off-canvas panel ("One", "Two", "Three", etc). Notice how, on click, the fadeIn animation on the overlay (which covers the content area) is repeated. It appears to flicker whenever an item in the menu is clicked.

No DOM or classes change dynamically when the menu links are pressed. And the overlay element (which has the fadeIn CSS animation) is not related in any way to click events within the off-canvas panel itself.

This flickering effect does not occur in the latest desktop editions of Chrome, Internet Explorer, Safari or Opera on Windows 8. I have not tested mobile browsers or Firefox OS, or other operating systems. I have tested with a clean installation of both Firefox and Nightly. The reported behaviour seems to be non-standard.

Feel free to email me directly if you need further information: [e-mail].

Comment 1

[[:Towkir] Ahmed]

Does it work with other browsers like chrome or safari ?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Is this report about the animation re-running or about the animation flickering?

I don't think I see either behavior when trying the steps given, although I'm not at all sure if I'm executing the steps as described.

Comment 3

[u545488]

Attachment: Animation Rerun Demo.mp4

Comment 4

[u545488]

Hi,

I have just realised that this error occurs only when rendered in Firefox Responsive View. I have uploaded a video to demonstrate.

In the video, notice that every time I click a link within the navigation pane, that an animation on an overlay element is re-run. This occurs only in Firefox Responsive View, and not any other mainstream desktop browser that I have tested (Chrome, Safari, IE, Opera).

I hope this helps.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Paulm any idea what responsive design view is doing weirdly here?

Comment 6

[Paul Rouget [:paul]]

I haven't tested, but my guess: when link is clicked, onLocationChange is triggered:

https://dxr.mozilla.org/mozilla-central/source/browser/devtools/responsivedesign/responsivedesign-child.js#116

... and then, the code that creates the floating scrollbar does some style related operations.

onLocationChange should not be triggered.

jyrans, do you mind taking a quick look at this?

Comment 7

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

This sounds related to bug 1145010, where styles that depend on :target aren't removed correctly, but only when:

1. in Responsive Mode, and
2. only on Windows and Linux

Keeping this bug separate for now, as it's not precisely the same issue (I don't see any use of :target here).  Keeping ni? for now, will investigate Paul's theory.

Comment 8

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

It's just as Paul guessed: we need to skip scrollbar insertion when we stay on the same document.  Posting patch momentarily.

Comment 9

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

The original issue was introduced by the e10s conversion in bug 1067145 during the 38 cycle.

Comment 10

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Attachment: MozReview Request: Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

Comment 11

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=a4dc18888586

Comment 12

[Paul Rouget [:paul]]

Comment on attachment 8646313 [details]
MozReview Request: Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

https://reviewboard.mozilla.org/r/15661/#review13995

Ship It!

Comment 13

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/410f6c78d226

Comment 14

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/integration/fx-team/rev/410f6c78d226

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/410f6c78d226

Comment 16

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8646313 [details]
MozReview Request: Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

Approval Request Comment
[Feature/regressing bug #]: Bug 1067145 (e10s support for responsive design)
[User impact if declined]: Incorrect page styling in responsive design on Windows and Linux
[Describe test coverage new/current, TreeHerder]: On m-c
[Risks and why]: Low, patch is quite simple
[String/UUID change made/needed]: None

Comment 17

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Keiran, could you please verify that this issue is fixed for you on 8/14 Nightly? Thanks.

Comment 18

[u545488]

Attachment: Fixed in Nightly.mp4

Comment 19

[u545488]

It works! Tested in Firefox Nightly 43.0a1 (2015-08-13) 64-bit installed on Windows 10. Screencapture attached.

Good work everyone!

Comment 20

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8646313 [details]
MozReview Request: Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

Approved for uplift to Beta41 and Aurora42. Thanks Keiran for verifying the fix.

Comment 21

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/ecb0ccdde097

Comment 22

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/1587bada854f

Comment 23

[[SV Manager] Florin Mezei, QA (:FlorinMezei)]

Marking Verified based on comment 19.