I'm using Canvas in html5 with EaselJS, and after playing with the interface for a while, the timer events in Easel started firing really slowly. These timer events should have been running at 20Hz, but were instead running at 1Hz. The odd part was I commented out the '_testMouseOver' function in easel, and the timer still ran slowly some of the time.
Things got weirder when I loaded the page and set up a console log in the _testMouseOver function. Sometimes it would run at 20Hz, printing out many statements, but other times it would run at 1Hz. The crazy part was: when I scrolled down on the page (not on the canvas), the timer returned to 20Hz!
This behavior remained when I commented out _testMouseOver, so that basically setInterval(fun, 50) was running 'fun' at 1Hz. This was reproduced roughly 50% of the time I refreshed the page. I also checked the cpu load via Activity Monitor and Chrome was only taking 10%.
Whats really strange is that when I closed that tab and opened a new one with the same page, the behavior disappeared.
What could have happened, and what other debugging steps might you explore?
Other details:
Chrome 52.0.2743.116 (64-bit)
OSX 10.10.5
Related
I'm using an iPhone 11 Pro with iOS 15.3.1.
I'm trying to figure out why when visiting my website, Safari is freezing most of the time when the page loads. Sometimes the page loads the first time I visit it, but on reload it basically freezes with no interaction.
When I connect the iPhone to a Mac and use the Safari inspector to connect to the webpage on the iPhone, the inspector is basically blank on all screens. If I go to the "Elements" tab, nothing shows. If I go to the "Console" tab and try to execute some Javascript, nothing happens when I press enter.
On OSX, I can see similar behavior, except I can actually open the inspector before I visit the page. In this case, when it freezes I can see a few elements in the "Elements" tab, but that's about it. Any sort of interaction I try to do in the inspector results in nothing happening.
I'm at kind of a loss. How can the development experience for such a popular OS/Browser be so terrible, and how do I work around the inspector itself not working? I can't replicate this freezing on anything besides Safari.
To be absolutely clear on my question:
What is your process to debug a webpage in Safari when it is in a state where the inspector no longer interacts with the webpage?
I did a broad divide and conquer of my app, commenting out top level code and working my way down uncommenting until I found the exact line that causes the freeze.
It seems calling HTMLInputElement.setSelectionRange() inside an onfocus event handler function caused an infinite synchronous loop in Safari, perhaps Safari synchronously blurs the input and refocuses for some reason when that function is called. And on page reload Safari was trying to focus on an input with that code automatically. That is my guess at least, removing the setSelectionRange() resolves the freezing problem.
Luckily, the freezing was fairly consistent so the divide and conquer approach worked. Unluckily, the inspector really should have done its job and picked up on the fact that the page was hanging and told me which function code execution broke at when Javascript was forced to stop, like Chrome or Firefox would.
If anyone has any better ideas for debugging these kinds of issues in Safari besides the programming equivalent of a short circuit test, I'll gladly accept the answer.
I have been developing a simple browser extension, and I have ran into a very strange behavior that happens on Chrome while it doesn't happen on Firefox. Basically, the extension runs much slower in Chrome than in Firefox, and it takes 3+ seconds to add a single class to a button, while it happens in milliseconds in Firefox.
This repo contains a demonstration of the issue. What is supposed to happen is, when the input box is not empty, the button should change color, this is almost instantaneous in Firefox, but it takes seconds to update in Chrome.
I have noticed that:
Further observations:
The problem goes away if I remove the TailwindCSS import in App.vue file.
The problem goes away if I remove the background script from the manifest.json file.
The problem goes away if I run performance profiling in Chrome Performance tab on the inspect window.
If I visit the extension page directly in the browser, like chrome-extension://extension-id/popup/popup.html#/ it is totally fine, there is no lag or anything.
For the first two, Webpack seems to be including a lot of extra code into the bundle, and removing any of these seems to be reduce the bundle size significantly.
For the third one, I imagine Chrome is prioritizing the extension execution when the performance profiling is enabled, therefore it is fast back again. This is probably the case for the last one as well because the page is in focus and it is probably the most important page to run for Chrome at that point. I believe this problem has something to do with the way Chrome runs Javascript in extensions or the way it redraws the UI.
This seems to be a very weird behavior, and I couldn't find any prior reports regarding this behavior. Any help is appreciated, I cannot think of anything else to add but I can add more details as requested.
Chrome apparently stops updating a page when you go idle (i.e. when the screen saver comes up).
My problem is I've written an alarm app, and it doesn't work because the Javascript stops running when the computer goes idle. Is there any way around this?
Update: After testing a few different things, it seems that Chrome doesn't stop updating a page, it just stops rendering it. So for my problem (an alarm app), this is solved.
Are you using requestAnimationFrame? I know Chrome explicitly pauses those callbacks, but it may not also pause setTimeout.
I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.
I have written a word game using HTML5 canvas tag and a little bit of audio. I developed the application on the chrome web browser on a linux system. Recently during the testing phase it was tried on safari 5.0.3 on Mac and the webpage froze. Not just the canvas element, but interactive element on the page froze. I have at some times experienced this problem on google chrome when I was developing but since the console did not throw any error before this happened, I did not give it much credence. Now as per requirements I am supposed to support both chrome and safari but this dismal performance on safari has left me shocked and I cannot see what error can be thrown which might lead to such a situation. Worse yet the CPU usage on using this application peaks to 70-80percent on my 2yr old macbook running ubuntu... I can only but pity the person who uses mac to operate this app, which undoubtedly is a heavier OS. Could someone help me out with a place I can start with to find out what exactly is causing this issue.
I have run profiles on this webapp on google chromes console and noticed that in the heap spanshot value increases steadily with the playing of the game, specifically (root) value which jumps up by 900 counts. Any help would be very appreciated!
Thanks
EDIT: I don't know if this helps, but I have noticed that even on refreshing the page after the app becomes unresponsive the page reloads and I am still not able to interact with the page elements but the tab scroll bar continues to work and I can see my application window completely. So to summaries the tab stops accepting any sort of user interaction inside the page.
Edit2: Nop. It doesn't work still... The app crashes on double click on the canvas element. The console is not throwing any errors either! =/ I have noticed this problem is isolated only to safari!
Edit3: Okay, so I performed some other tests today. I isolated the HTML5 widget and its HTML data only and ran it on safari locally to reproduce the error. Alas it works well! So I tried playing the game from my server without Facebook integration, and it works fine again! So The issue crops up only on safari on MAC OSX, while the widget is on Facebook canvas as a Facebook application. I am very hard-pressed to come up with a reduced test case scenario for this app... =/ It gets weirder, the game works well on safari for windows. Also after the tab freezes the other tabs continue to be responsive and well working. This tab too closes on clicking the close button and stuff, but if I load another page on this same tab after its frozen the page loads in the tab canvas, but I cannot interact with it. Not even google.com! So I am sure there is no bug with my game but its a safari bug... Will soon file a bug report, thanks for all the help people... :)
What you should do, in one sentence: Reproduce the problem with as little code as possible.
Start removing parts of your app until you find nothing that can be removed while still preserving the error. Start by throwing out external resources (css, images, etc) and leave just the html and javascript. Try removing the audio. Try removing as much gaming logic as possible. Try removing all user input code.
If this truly is a bug in Safari itself and not in your code, it should be possible to create a very small code example. Until you have that, saying "my web app doesn't work in safari", without any details or examples, will get you nowhere.