iOS Safari/Chrome focusing HTML Selects Freezes the browser - ios

I saw that a similar question has been asked awhile ago, but it never had a real solution.
I have a page with about 30-40 inputs/selects. Some of them are within hidden divs at some points. The inputs don't give me any problems. But, sometimes when clicking one of the 10 selects, the browser locks up (in Safari and Chrome). It doesn't always do it, but when it does the browser usually crashes or is frozen for about 20-30 seconds.
Is there any known Solution to fix this problem? Is there any way to get around this without making some custom designed select options with html/javascript?
I don't have any hidden inputs by the way.

Related

IOS native controls invisible/hidden in PWA

We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.
Open the app from the homescreen
Use the app for a while
Put it into background
Turn off the screen for a while
Turn the screen back on and put the app to foreground again
The bug is that nothing seems to happen when you click on a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus on click, but not options are shown.
Now it really becomes strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.
So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.
It seems to be for all native safari controls that shows some kind of modal/popover.
I've did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318
It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.

IE 11 crashes when using GPU rendering - large MVC page with bootstrap and datatables

I've got a large mvc 5 bootstrap web page that's repeatedly causing IE to crash. The page has a large number of bootstrap accordions with jquery datatables in. The page loads fine but if you scroll too fast then a small white rectangle appears in the upper left side of the page and IE stops responding.
The page is fine with a much reduced amount of data, it's fine in chrome and its fine if you tick the "Use software rendering instead of GPU rendering" option in IE.
At the moment my solution is to display a warning on the page to the users that they need to tick that box if I've got more than 100 rows of data but especially as that option requires a restart of IE it's not ideal.
How can I go about fixing this, is it something anyone else has experienced?
ok, fixed but I'm not sure it's applicable for anyone else. I was using a old version of datatables (1.10.7) So I updated to the latest and it stopped happening but the memory usage still built up whilst the page was just sitting there. I removed the flash buttons and changed them to the html5 buttons and everything was much much better.

Why is JqueryUI's button slow in IE?

I've been tracking down a performance problem in one of our javascript app (in IE, to make matter worse) and I was able to track it down to jQueryUI button feature. I've created a jsfiddle showing the issue. The problem is 3 parts:
First, the generation of the buttons is extremely slow. The page generates 800 buttons in 5+ seconds under IE8, whereas it takes around 700ms when I disable the button feature. To make it worse, it gets slower and slower for every create/delete cycle. For comparison, in Chrome it takes less than a second (around 600ms) with the button feature and around 50ms without it. That's a 10x slow down for both browser!
Second, deleting/destroying all those button is also slow. I use the empty() method on the container to clean all the buttons and that ultimatly calls destroy on the button. This operation takes around 5 seconds under IE8 and 500ms in Chrome. Once I remove the jquery button feature, it takes 200ms in IE8 and 30-40ms in Chrome. That's a 20x slow down, worse than generating the button themselves.
Third, it seems that the button feature causes a huge memory leak in IE. Repeatedly creating and deleting the buttons result in the memory usage going up and up, but once again removing the button feature fixes this.
Can anyone explain this behaviour? Is this a performance problem in jQueryUI that should be reported or am I hitting a pitfall? Any workarounds?
Note: when I say i remove the button feature, it's not that I remove the <button> element from the document, it's just that I remove the call to jqueryUI's button function:
.button({
'text': true
})

Strange UIWebView Bug/Behavior

We have a UIWebView in our app, displaying HTML data loaded from memory (not a file). We are experiencing some very strange bug/behavior. Some pages take very long time to render (1-2 minutes). We looked at the source of the pages, and it is indeed very busy with badly written CSS and HTML (not in our control). However, we noticed that if we set a webview to load a page, and then press the power button to shut the iPhone's screen, then immediately press the power button again, and go back to our app, the webview renders the page instantly.
Has anyone experienced this? Any ideas what's going on?
So, uhm, forgot to answer this. It ended up that some of our HTML data had images that were linking to internal organization URLs, which were not accessible outside. And since the web view did not ask the delegate whether it should load, we didn't know about those resources. Pressing the power button caused the connections to drop, which made it render the page.

jQueryMobile page transition functionality broken

I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.

Resources