Closed Bug 1189702 Opened 9 years ago Closed 9 years ago

CSS animation re-run when a link is clicked


(DevTools :: Responsive Design Mode, defect)

42 Branch
Not set


(firefox40 wontfix, firefox41 fixed, firefox42 fixed, firefox43 verified, firefox-esr38 affected)

Firefox 43
Tracking Status
firefox40 --- wontfix
firefox41 --- fixed
firefox42 --- fixed
firefox43 --- verified
firefox-esr38 --- affected


(Reporter: u545488, Assigned: jryans)



(Keywords: regression)


(4 files)

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:
Does it work with other browsers like chrome or safari ?
QA Whiteboard: [bugday-20150727]
Component: Untriaged → CSS Parsing and Computation
Flags: needinfo?(hello)
Product: Firefox → Core
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.
Flags: needinfo?(hello)

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.
Paulm any idea what responsive design view is doing weirdly here?
Flags: needinfo?(paul)
I haven't tested, but my guess: when link is clicked, onLocationChange is triggered:

... 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?
Flags: needinfo?(paul) → needinfo?(jryans)
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.
See Also: → 1145010
It's just as Paul guessed: we need to skip scrollbar insertion when we stay on the same document.  Posting patch momentarily.
Assignee: nobody → jryans
Component: CSS Parsing and Computation → Developer Tools: Responsive Mode
Ever confirmed: true
Flags: needinfo?(jryans)
Product: Core → Firefox
The original issue was introduced by the e10s conversion in bug 1067145 during the 38 cycle.
Attachment #8646313 - Flags: review?(paul) → review+
Comment on attachment 8646313 [details]
MozReview Request: Bug 1189702 - Only insert floating scrollbars when document changes. r=paul

Ship It!
Closed: 9 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 43
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
Attachment #8646313 - Flags: approval-mozilla-beta?
Attachment #8646313 - Flags: approval-mozilla-aurora?
Keiran, could you please verify that this issue is fixed for you on 8/14 Nightly? Thanks.
Flags: needinfo?(hello)
Attached video Fixed in Nightly.mp4
Flags: needinfo?(hello)
It works! Tested in Firefox Nightly 43.0a1 (2015-08-13) 64-bit installed on Windows 10. Screencapture attached.

Good work everyone!
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.
Attachment #8646313 - Flags: approval-mozilla-beta?
Attachment #8646313 - Flags: approval-mozilla-beta+
Attachment #8646313 - Flags: approval-mozilla-aurora?
Attachment #8646313 - Flags: approval-mozilla-aurora+
Blocks: 1172280
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.