CSS animation re-run when a link is clicked

RESOLVED FIXED in Firefox 41

Status

defect
RESOLVED FIXED
4 years ago
a year ago

People

(Reporter: u545488, Assigned: jryans)

Tracking

({regression})

42 Branch
Firefox 43
Dependency tree / graph

Firefox Tracking Flags

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

Details

Attachments

(4 attachments)

Reporter

Description

4 years ago
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: hello@kieranpotts.com.

Comment 1

4 years ago
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.
Reporter

Comment 3

4 years ago
Flags: needinfo?(hello)
Reporter

Comment 4

4 years ago
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.
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:

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?
Flags: needinfo?(paul) → needinfo?(jryans)
Assignee

Comment 7

4 years ago
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
Assignee

Comment 8

4 years ago
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
Status: UNCONFIRMED → ASSIGNED
Component: CSS Parsing and Computation → Developer Tools: Responsive Mode
Ever confirmed: true
Flags: needinfo?(jryans)
Product: Core → Firefox
Assignee

Comment 9

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

Comment 10

4 years ago
Bug 1189702 - Only insert floating scrollbars when document changes. r=paul
Attachment #8646313 - Flags: review?(paul)
Assignee

Updated

4 years ago
Blocks: 1145010
Assignee

Updated

4 years ago
See Also: 1145010

Updated

4 years ago
Attachment #8646313 - Flags: review?(paul) → review+
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!
Assignee

Updated

4 years ago
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/410f6c78d226
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 43
Assignee

Comment 16

4 years ago
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)
Reporter

Comment 18

4 years ago
Posted video Fixed in Nightly.mp4
Flags: needinfo?(hello)
Reporter

Comment 19

4 years ago
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+

Updated

3 years ago
Blocks: 1172280

Updated

a year ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.