1510540 - In Responsive Design Mode, JavaScript running is slowed down to a crawl after switching to a different tab

Status: RESOLVED WORKSFORME

(DevTools :: Responsive Design Mode, defect, P3)

Description

[Elmo Allén]

Attachment: test.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

In Responsive Design Mode, the JavaScript engine seems to slow down considerably, if I switch to a different tab in the browser and then come back. The problem goes away if I close and reopen the RDM.

I made a short test HTML with quick & dirty JavaScript. When you click the top element, it runs a function with setInterval that changes its height. The bottom element was to test if it affects CSS transitions, but doesn't seem to.

To reproduce:
1. Open the attached HTML.
2. Invoke Responsive Design Mode.
3. Open a new tab (no need to browse on any page with it).
4. Come back to the tab with the RDM.
5. Click the element "Toggle: JavaScript animation"

You can see the animation happening at a rate of 1 to 2 ticks per second, when it should happen every 25 millisecond. If you now close & reopen the RDM and then reload the page and click the element again, you'll see it moving at the intended smooth growing rate.

If now, after getting the initial bug to show, I reload the page, the rendering seems to stuck completely, even the CSS transitions stop working. If I then switch to a different tab and back, the rendering again continues, but with the initial bug.

This doesn't seem to happen in the 63 version, only in the 64.

Comment 1

[Elmo Allén]

Weirdly enough, this doesn't seem to happen if the tab switch is very quick, something like under half a second. If I stay on the different tab for at least one or two seconds, the bug happens. With the quick tab switch back and forth I can sometimes even get it to again working normally, but not all the time.

Comment 2

[Elmo Allén]

Now my "normal" Firefox updated from 63 to 64.0, and now this bug started occurring in it as well, where before this it didn't occur. In my Dev browser, now 65.0b2, it still happens as well.

Comment 3

[Martin Balfanz [:mbalfanz]]

Attachment: rdm.mp4

I can reproduce this issue as long as the newly created tab stays open.

Note that not only is the animation slow, but also the browser navigation does not react anymore. See the video attached where I try to use the back button and it only reacts when I toggle RDM off again (or close the new tab)

Comment 4

[Sören Hentzschel]

Do we know anything about the cause or even better: how to fix? That's the most annoying issue when developing websites in Firefox. And as a frontend developer that's what I do all the day. :)

Comment 5

[Elmo Allén]

I haven't tested this for a while, but it seems that at least on 67.0b1 I cannot reproduce this issue. The 65.0.2 (I believe the latest published version) still does it. Didn't test this on 66.x.

Comment 6

[Brad Werth [:bradwerth]]

I can't reproduce. Is it still occurring for you?

Comment 7

[Elmo Allén]

(In reply to Brad Werth [:bradwerth] (PTO until 7/29) from comment #6)

I can't reproduce. Is it still occurring for you?

Like I said in the comment above, after the version 67.x I cannot reproduce it any more.