ReCaptcha v3 stalling out in Safari(Mac and IOS) - javascript

I've stuck ReCaptcha 3 in a polymer 2 app and it works great, except that in Safari, when I try to get the token, the call to grecaptcha.execute stalls. Every. Single. Time.
I've tried implementing different ways, sticking all captcha stuff straight in the index to keep it all out of the shadow dom, wrapping everything up in a component, automatically rendering vs explicit. It just doesn't work in Safari.
Also, probably doesn't mean much, but in my testing, some devices consistently just lock up the browser and never move on, while others will always un-freeze after a few minutes.
I've also seen similar behavior on our sites using the v2 invisible ReCaptcha, except that with that one iOS Safari crashes on all devices and Mac doesn't have any issue.

Related

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.

My React app shows a blank page at one of the stages on iPhone. Anywhere else (even Safari on MacOS), it works as intended

I am working on an application where users need to fill in some personal information to register an appointment. (Can't share too many details as it is confidential work)
At some point, my application opens a "popup" type of component which simply lists the previously filled information for the user. It acts as an overview step before proceeding to the next steps of registration.
I tried this on various browsers. On Pc, it works on Edge, Chrome, Firefox and Opera. On Android, I only tested Chrome, and it worked fine there. On MacOS, I tested Chrome and Safari, and it was fine on both.
But when I tried it on an iPhone, I just get a blank page when I get to this aforementioned step.
I am confused as to what the problem might be, because everywhere else, it seems to work fine. Even on the Apple ecosystem itself, there are devices which render the application correctly.
Any help would be appreciated.
Thank you in advance!
On the device, enable Web Inspector in Safari's settings. Then on a Mac, open Safari, enable the Develop menu if you haven't already and use it to attach to the Web Inspector on the device (there will be a submenu named for the device, with all inspectable frames as menu items). Now you have a full inspector to investigate the problem.
I managed to pinpoint the problem to a date field. For some reason, Safari on iOS could not parse a string timestamp to a specific date (It was throwing an error when I was creating a new Date object and passing in the timestamp to the constructor).
I formatted the date to a string manually and everything is working fine now.

AngularJS / Javascript Links & Buttons Unresponsive on IOS

Been stuck on a nasty bug for way too long. Hoping someone out there has experienced this already. The issue is only prevalent on IOS 12+ (Iphones for sure, specifically IPhone 5 & 7 - haven't tested ipad) - Chrome or Safari. Androids work fine, all desktop browsers work fine.
Our app is using the Angular core with Angular Material & UI Router.
How to reproduce the issue:
1) click item as seen in picture
2) Arriving at the item detail page, click on back to results or browser back button:
3) The following is end result (a page where none of the links or buttons work, including ui-sref, regular links, ng-clicks):
Note that I double checked if any elements were in the way - there are not. Also, manually triggering a click via JS in the console allows it to work as intended. Super strange...
Also note that refreshing the page once it breaks allows it to function normally again. Also refreshing once in the details and then pressing back allows it to function normally.
There are no console warnings or errors.
Ideas?

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.

My HTML5 web app crashes and I have no clue how to debug

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.

Categories

Resources