Develop Reference

Webpage freezes in Safari on both iOS and OSX when the page reloads?

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.

Why is the onauxclick event triggered in a different way in google chrome browser?

So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?

While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

Scrolling differences on Safari and Chrome (iOS) can you test for them?

It used to be (before iOS 8) that Safari couldn't natively animate on scroll, you had to stop scrolling to see the animations. Safari solved that issue, but when accessing the same website on Chrome (running in iOS) the issue persists. I read that chrome hasn't yet updated this on iOS. I know that it works great on Android... so... Is there a way to test for this "feature" either with modernizr or other js? I would like to disable animations on scroll if they are not supported. I've been able to accomplish this by checking which browser the user is using, but it would be easier if I could just check whether the functionality is available.

Before iOS 8, iOS would pause painting while the user was scrolling. This behavior was discontinued for applications using WKWebView but remains for browsers using UIWebView — this is why you only see the old behavior for certain third-party applications.
One approach is to detect whether your page is loaded inside WKWebView or not. An answer to another question suggests testing for indexedDB support. indexedDB is the only HTML5 feature difference between the WKWebView and UIWebView.
The snippet from the other answer suggests how to do this:
if (navigator.platform.substr(0,2) === 'iP'){
//iOS (iPhone, iPod or iPad)
if (window.indexedDB) {
//WKWebView
}
}

Angular application doesn't work on iPhone/Safari 5.1.7

Currently am developing a big project in AngularJS(version 1.3X), Bootstrap(3.3.1), animate.css and few other libraries.
I do test my application on different devices via Google Chrome Developers mode and on few browsers like Google Chrome, Mozilla Firefox and Safari(for Windows7).
I also have possibility to perform tests on Android device and iPhone.
For some strange reason my application seems to work on every device except for iPhone 5 with Safari 5.1.7(when using same Safari but on Windows7 it does work).
Has anyone before stumbled uppon similar problem?
#EDIT
Sorry, forgot to mention what is actually happening.
When I try to press button that's supposed to toggle (using jQuery, I know it should be done via ui-routing, but that's how my boss wants it) portion of the view (panel) it does not work. Buttons do not perform any actions. There is no reaction.

Chrome browser not working as expected (onclick/onsubmit error?)

Here is one strange thing. Thanks for ideas.
My Chrome browser does not interact with some web pages as expected. When opening the pages on a different device (such as Browserstack or colleages' computers), everything works fine. There must be a problem with my device, it is obviously not linked to the browser version itself.
Example 1: click on element does not show reaction
When clicking on the small gray dots below the main image here, Chrome usually performs a caroussel switch. On my device, it does not. Clicks are constantly being ignored, although the automatic caroussel switch works just as on any other device.
Screenshot: i.stack.imgur.com/KR64m.png
Example 2: click on button does not show reaction
When clicking the button "Weiter" on this page in the lower right section of the page, my Chrome does not show any reaction. Works as expected on any other device.
Screenshot: i.stack.imgur.com/g8dHN.png
My Chrome Version: 33.0.1750.146 m (plugins disabled, surfing in anonymous mode)
OS: Win 7 Pro SP1 64 Bit
Thanks for help!
UPDATE:
I found out that my Chrome shows different results to a VisualEvent-check than Browserstack.
Have a look here:
My chrome (buggy): i.stack.imgur.com/Earrs.png
Browserstack (working): i.stack.imgur.com/zRRgA.png
What can I learn from that? There are two more event handlers
There are no VisualEvent differences for the second example, however.
UPDATE 2: On a MS Virtual Machine, everything works as expected:
My comment below

Hm do you deactivted your Javascript by accident?
https://support.google.com/adsense/answer/12654?hl=de
Have u tried a different browser on the same device?

I had this problem too, but it was solved by itself the next day. Maybe you just need to do a reboot?

Concerning my device, the issue is related to the fact that my device has a touch screen which Chromium does not know how to handle in the standard configuration. Considered a bug.
nzolghadr#chromium.org
The problem is with "'ontouchstart' in window" expression which the jquery.flexslider library uses. Right now on Windows Chrome returns that as true when you have chrome://flags/#touch-events enabled/automatic. Related issues are: crbug.com/467934, crbug.com/555746, and crbug.com/392584 which based on those it seems that Windows thinks something is touch enabled and Chrome just reflects that.
https://bugs.chromium.org/p/chromium/issues/detail?id=373991#c13