Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refresh issue in Firefox 57 #416

Closed
tbnv opened this issue Nov 29, 2017 · 73 comments
Closed

Refresh issue in Firefox 57 #416

tbnv opened this issue Nov 29, 2017 · 73 comments

Comments

@tbnv
Copy link

@tbnv tbnv commented Nov 29, 2017

Quick, short summary:
I'm using Firefox 57. When I save SASS files, they are processed but there is an issue with refreshing the page in the browser. The problem doesn't occur in other browsers.

Actual results:
The page is not refreshed and this error shows up in the console:

Error: Permission denied to access property "mediaText"    localhost:5757:30:2917

If I save the file a second time, the error message is completed with this:

Error: Permission denied to access property "mediaText"    localhost:5757:30:2917
A refresh was requested, but the page is already refreshing. The new refresh request was ignored.    localhost:5757:30:4756

The line 30 in the web inspector is the JS injected by CodeKit.

A link to download a simplified project or file that shows the issue:
capture d ecran 2017-11-29 a 17 01 51

Your configuration (any details about your system that you think might be relevant)
macOS 10.13.1
iMac 5K
CodeKit 3.4.2 - build 26148
Firefox 57.0
Atom 1.22.1

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Nov 29, 2017

@tbnv
Copy link
Author

@tbnv tbnv commented Nov 29, 2017

Yep, it's Quantum.

I tried with all plugins disabled (1P, uBlock, HTTPS Everywhere) but the problem remains, and I don't use specific security software.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Nov 29, 2017

@tbnv
Copy link
Author

@tbnv tbnv commented Nov 30, 2017

I have troubles to replicate the issue. It doesn't happen all the time. Sometimes, after a full page refresh, I cas save the SCSS files a few times before it happens, then it comes back. And it's absent from a new test project I created to post here.

@AlexandreBonneau
Copy link

@AlexandreBonneau AlexandreBonneau commented Dec 5, 2017

For info, I'm also encountering the Error: Permission denied to access property "mediaText" error message in a personal project, and it happens only in Firefox 56.0b12, not in Firefox 52.5 nor Chrome 62.

It happens when I try this:

const media = document.styleSheets[i].media;
if (mediaType === 'object') {
     if (media.hasOwnProperty('mediaText') &&
        (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1))) {
        styleSheet = document.styleSheets[i];
    }
}

while mediaText always exists and can be seen in the console, merely trying to access it from the script results in that error above. 😠

@tbnv
Copy link
Author

@tbnv tbnv commented Dec 5, 2017

You're right, it never happens in Chrome (nor Safari btw).

@AlexandreBonneau Sorry but you're sure you use FF 56.0b12 and not FF 57.0b12? Because FF 57 has just been released a few days ago.

@AlexandreBonneau
Copy link

@AlexandreBonneau AlexandreBonneau commented Dec 6, 2017

Yes I'm sure. I pinned the version to prevent this browser to switch to v57+ ; the quantum version nuked ~40 extensions I'm using everyday and am not prepared to drop those!

@AlexandreBonneau
Copy link

@AlexandreBonneau AlexandreBonneau commented Dec 6, 2017

Also, do note that this bug also appears in Firefox 58.0b8 and 58.0b9.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Dec 6, 2017

This sounds like a bug in FireFox that got fixed in a later release.

@AlexandreBonneau
Copy link

@AlexandreBonneau AlexandreBonneau commented Dec 6, 2017

@bdkjones sorry I edited my message before your answer as I found out that the problem is still present in the latest Firefox version.

It seemed to work, but after a few refresh the same error message was shown again 😢

@tbnv
Copy link
Author

@tbnv tbnv commented Dec 6, 2017

In a comment above I said the issue doesn't happen in a new test project I wanted to post here. But I tried again and it actually does.

So if you want a test project, here is one. 😉

You'll see that after a few refreshes upon SASS processing (I didn't see it occur when saving HTML or PHP, due to full page refresh I guess), refresh will hang and the error will appear in the console. Maybe it will be after 2 saves, maybe after 10 or 20. I really can't predict this.

test.zip

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Dec 6, 2017

@tbnv
Copy link
Author

@tbnv tbnv commented Jan 8, 2018

@bdkjones FYI, problem still present after recent Firefox upgrades.

@FellowshipAgency
Copy link

@FellowshipAgency FellowshipAgency commented Jan 15, 2018

I am also experiencing this issue.

@nasergivechi
Copy link

@nasergivechi nasergivechi commented Jan 25, 2018

The same here, I don't get it.

@shaynestatzell
Copy link

@shaynestatzell shaynestatzell commented Jan 31, 2018

+1

@joopvos
Copy link

@joopvos joopvos commented Feb 5, 2018

FF Developer Edition 59.0b6 (64-bit) ... doesn't refresh ... :(

FF Quantum (Nightly) 59.0b6 (64-bits) ... does refresh ... :)

@alex-miura
Copy link

@alex-miura alex-miura commented May 21, 2018

Not working on: 61.0b6 (64-bit) - might try the nightly channel - currently on Aurora channel.

@mejobloggs
Copy link

@mejobloggs mejobloggs commented May 31, 2018

Not working 61.0b9 either

@tbnv
Copy link
Author

@tbnv tbnv commented May 31, 2018

Yeah… I'm also experiencing the issue with FF 60 stable channel.

@bdkjones I opened the ticket back in November, about 6 months ago. Your latest answer was posted in December. Sorry to say this, but now I find it quite a bit long. Could you please at least give us some news, if it will be fixed soon, etc.?

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented May 31, 2018

I hear ya. The trouble is: I don't know why FireFox is behaving this way. Given that no other browsers show the issue, that the issue came about in a recent FF update, and given the fact that FF has always been a giant pain to deal with, I've got a sneaking suspicion that this is a FF bug.

I have not given up on finding a workaround, however.

@heartfield
Copy link

@heartfield heartfield commented Nov 7, 2018

This continues to be an issue. Currently bugged in Firefox 63.0.1. A fix would be really appreciated. Also, Codekit seems to lose connection a lot faster than before and shows the red "This page has lost contact…" warning message. I cannot determine exactly why or when it happens but it's frequent enough to be annoying.

Firefox 63.0.1, MacOS 10.14, CodeKit 3.7.4

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Nov 7, 2018

Yea, the trouble is that I think this problem is in Firefox. I have no idea what causes it, no other browser has any similar problem, and Firefox has a reputation for being finicky and stupid.

@heartfield
Copy link

@heartfield heartfield commented Nov 8, 2018

Is this an issue that could be filed on Bugzilla? I would do it myself if I could but I don't know how to properly describe the problem.

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Jun 13, 2019

I think I found a workaround. In about:config, find the following values :
browser.tabs.remote.useCrossOriginOpenerPolicy
browser.tabs.remote.useCrossOriginPolicy

Toggle them to true.

I've been working like this for about an hour, and CodeKit's auto-refresh still hasn't died, and it used to die all the time. So I think it's safe to say it works. I'll come back and say something if it dies again. In the absence of other news, assume it's kept working.

Note that I'm pretty sure this has security implications I haven't researched. Honestly, I don't really know what I'm doing here. But hopefully knowing that this workaround works can guide @bdkjones towards a real fix.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Jun 13, 2019

Interesting. Is there any documentation on exactly what those policies do?

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Jun 14, 2019

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features
I found this. Cmd+F your way to "browser.tabs.remote.useCrossOriginPolicy".

Hope it helps.

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Jun 14, 2019

Update: Auto-refresh died once after working for hours and even through the night (the computer was on Sleep). I restarted CodeKit's browser refresh server and my browser and it's been working fine for a while. Looks like it improves the issue but doesn't prevent it entirely.

Edit: What the hell, after an hour it's back to dying all the time as before. Forget I said anything. It was all an illusion. I guess I just got lucky for a few hours.

Edit 2 : I'm on another two-hour streak without the auto-refresh dying. I DO think this made the failures rarer.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Jun 14, 2019

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Aug 14, 2019

Here is a list :

  • Plugins :
    • Cisco H264 video plugin
    • Google Widevine content decryption module
  • Extensions :
    • 1Password extension (desktop app required)
    • Clear Cache
    • Firefox DevTools ADV Extension
    • LastPass : Free password manager

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Aug 14, 2019

More information: my computer went to sleep and the bug did not happen after waking it up. No banner or anything; it's like it never went to sleep at all. I'm not sure sleep mode has anything to do with the bug.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Aug 14, 2019

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Aug 14, 2019

I tried in safe mode. The issue still happens.

@iclang
Copy link

@iclang iclang commented Aug 21, 2019

I can confirm this happened today using CodeKit 3.9.2 - Build 31491 and Firefox Quantum 68.0.2 in Safe Mode.

Here is site I am working on if that helps. Let me know what else you might need.

https://www.dropbox.com/s/6x4dj4bi7fjodu1/CodeKitRefreshIssue.zip?dl=0

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Aug 27, 2019

Does it happen with reproducible regularity, or does it seem random?

@iclang
Copy link

@iclang iclang commented Aug 27, 2019

It does happen quite regularly over the course of a few hours but have not been able to pinpoint a way to always reproduce it.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Aug 27, 2019

Oh Firefox. SOMEBODY had to pick up where Internet Explorer left off.

I’ll take another look over here, but I haven’t been able to reproduce this after my last fix.

@iclang
Copy link

@iclang iclang commented Aug 27, 2019

Ha! I will attempt to be more conscious of what's going on when it happens in hopes of nailing down a way to trigger it. I totally understand not being able to fix a bug that you can't reproduce. Thanks!

@ArianeNubee
Copy link

@ArianeNubee ArianeNubee commented Aug 27, 2019

Now may be a good time to remind you of my idea of catching the error and forcing a full refresh when it happens.

@Ariane-B
Copy link

@Ariane-B Ariane-B commented Jan 30, 2020

I came back to work after several months off to notice the issue is closed, yet the bug still happens very often. Any news?

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 3, 2020

I haven't been able to reproduce this after my last fix, but I can force FireFox to use full-page reloads. Unfortunately, FireFox is a pretty lousy browser in terms of JavaScript parsing and execution.

@Mattrushka
Copy link

@Mattrushka Mattrushka commented Feb 3, 2020

I really appreciate your product & work but I disagree with the FireFox bashing here. I have never experienced mutli-browser syn/refresh issues in my projects when using different tools like Grunt, Gulp or Node.js. I personally have no problem developing & testing in Chrome but maybe other people would appreciate to know that Codekit does not support all major browsers in terms of browser sync before buying the product.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 3, 2020

@heartfield
Copy link

@heartfield heartfield commented Feb 4, 2020

I can confirm the refresh bug still happens frequently. I use Firefox as my main browser for developing. Because of this bug it's hard to know if a CSS change I made is not working properly or if the Codekit refresh script has bugged out again. Any fix or workaround would be welcome so I can stop refreshing manually.

@Ariane-B
Copy link

@Ariane-B Ariane-B commented Feb 4, 2020

Honestly, whether or not you can reproduce and fix the issue at this point, I'd really appreciate it if you could find a way to alleviate this huge pain. I don't like Chrome's interface for development very much, and having to use it just because auto-refresh won't work in Firefox is terribly frustrating.

Unless you're confident you can fix it for real, could you please, at least temporarily, force a full-browser refresh whenever the bug happens? That would at least fix the numerous moments where we're wondering if we're targetting the wrong selector or if CodeKit refreshing died on us again.

As for investigating the issue, would reaching out to someone at Mozilla be a potential solution? Maybe they'd have helpful insight? It's their own engine, after all.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 4, 2020

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 4, 2020

I’ve already reached out to Mozilla—there’s an open bug about this JS issue that dates back years. It’s just not a priority for them. If I recall correctly, it’s a timing issue with security scoping on the “mediatext” property of a stylesheet.

I definitely understand the frustration. If you can post a demo project that reproduces on your end, I’ll take a look at this and either find a workaround for Mozilla’s bug or force full-page reloads on Firefox. The next CodeKit update should release in a couple weeks and I can have it in that.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 5, 2020

As far as I can tell, this issue only manifests when a CSS stylesheet is complex enough to trigger the timing bug or when there are enough stylesheets on the page to do the same.

I just re-tried the demo projects I use to test CodeKit over here and they all worked flawlessly in Firefox 72.0.2. I'm not able to reproduce the issue.

If you have a project that DEFINITELY shows the issue, please send me a download link. Ideally, it should be a project that does not depend on any external resources such as a WordPress database, etc.

@iclang
Copy link

@iclang iclang commented Feb 5, 2020

Hey @bdkjones, I uploaded an example awhile back. Hope that helps.

#416 (comment)

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 6, 2020

Yep. That example is the one I’m using, but I’ll grab a fresh copy just in case.

Out of mere speculation: what hardware are the folks still seeing this issue using? I’m wondering if I can’t reproduce it because I’m on faster hardware.

@Ariane-B
Copy link

@Ariane-B Ariane-B commented Feb 6, 2020

I'm sorry, I was totally swamped at work today and couldn't even think about this issue. I'll try to prepare an empty project for you on Monday. I'll tell you all the details about my machine then as well.

@iclang
Copy link

@iclang iclang commented Feb 6, 2020

@bdkjones I am using a MacBookPro 2018 (2.9GHz i9; 32GB)

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Feb 6, 2020

@Ariane-B
Copy link

@Ariane-B Ariane-B commented Feb 13, 2020

I'm really sorry for the delay. I've been busy and kept forgetting.

My laptop's details are:

macOS Catalina (10.15.2)
MacBook Pro (Retina, 15-inch, Mid 2015)
2.5 GHz Intel Core quad-core
16 GB 1600 MHz DDR3 memory
Graphics: AMD Radeon R9 M370X 2 GB / Intel Iris Pro 1536 MB
CodeKit 3.10.2

Now, as for the bug. I tried for several long minutes to reproduce the bug in a simple test project. Without success. Then I switched CodeKit to my normal work project, refreshed my browser, and saved my SCSS. The bug happened instantly.

I switched back to the simple project and refreshed my browser. Bingo, the bug was still there. It looks like something in my big, complex project caused the bug and it stayed? Looks like we have a hint here.

I'm including the simple project.

The big project is a pretty heavy WordPress website. Would you like me to send it to you? It's probably not a good idea to share all of my job's code publicly.

codekit-test.zip

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Mar 2, 2020

Well, I can't run the WordPress site over here to test with, but perhaps you can transform it into a page that's still complex enough to reliably show the issue?

In other words, grab the HTML from the browser and throw that into an index.html file that uses the same stylesheet. If we can get a static page that reliably triggers the race condition, I can use that to come up with a workaround.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Mar 3, 2020

Alright, after much investigation, here's the deal:

It's Mozilla's Issue

Mozilla has (apparently) finally admitted that this is a bug on their end. Someone had the same issue using refreshes from Microsoft VisualStudio: https://developercommunity.visualstudio.com/content/problem/738525/vs-2019-css-auto-sync-not-working-pt2.html

The support tech from Microsoft updated a Mozilla bug with a reproducing test case: https://bugzilla.mozilla.org/show_bug.cgi?id=1423300#c8

The Mozilla guy was able to see the problem, but it was intermittent for him as well. As was the case here, nothing the Microsoft people tried solved the issue because...it's a bug in Firefox.

Nobody, anywhere, was able to reproduce this problem in any other browser.

The Inspector Must Be Open

The issue reproduces ONLY when the inspector is open in Firefox. Without the inspector open, refreshes work all day long.

Once the issue occurs, you must close the inspector and then reload the page manually once. At that point, the issue will not re-occur until the inspector is reopened.

Reasons MediaText Is Needed

CodeKit's refresh script accesses the mediaText property of a <link> element so that it can set the correct media type once it reloads that element. It is POSSIBLE for me to modify the script such that, if you're using Firefox, CodeKit won't access mediaText and therefore won't know what to set on the reloaded <link> element.

In practice, this will mean that if you have a stylesheet for print, the styles from that stylesheet will be applied to the website on-screen after a refresh because the mediaType property isn't set correctly because Firefox has a bug.

That would be very freaking annoying, obviously.

Other Options

  1. CodeKit could stop offering injection stylesheet reloads in Firefox and simply reload the entire page. That's obviously less than ideal. It should be possible for me to do this only when the bug manifests. But that will be any time you save a file with the Firefox inspector open.

  2. When the issue occurs, CodeKit could show you an alert informing you of the Firefox bug and telling you to close the inspector and reload the page once in order to re-enable live-refreshing.

  3. You guys could pressure Mozilla to get their act together and fix the issue. It's been years, after all.

  4. We could all switch to Safari?

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Mar 3, 2020

The reason I couldn't reliably reproduce this issue, in retrospect, was that it never happens without the inspector open. It was only when I opened the inspector to verify that no errors were being logged to the console that I saw the issue start to occur. This is also why I mistakenly thought an earlier change had fixed it—I tested the change with the inspector closed and the bug does not manifest in that state.

@bdkjones
Copy link
Owner

@bdkjones bdkjones commented Mar 3, 2020

Update

I may have stumbled on a pretty elegant workaround. Turns out this doesn't always happen when the inspector is open. It seems to be only when the inspector is first opened, and only when it's on the actual "inspector" tab that shows the DOM. That will produce the bug on the first injection-reload.

However, I modified my script to detect that and force a full-page reload. After that completes, injection-reloads seem to work again, regardless of the inspector being open.

I'll need to test this some more and see if I can find a pattern, but it looks like the workaround might just be random full-page reloads when working in Firefox with the inspector open.

@Ariane-B
Copy link

@Ariane-B Ariane-B commented Mar 3, 2020

Amazing! After all that time, the bug is (kinda) understood at last! Looks like you don't need my site anymore after all.

I mean, even more amazing would be if the bug in Firefox were fixed altogether, but I like your solution. Only one full refresh when it happens and it fixes the bug from then on? That's a very satisfying solution.

Thanks. You're a genius.

PS: Safari has several weird CSS/JS bugs too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests