Website causing mobile Chrome browser to become non-responsive - android

I made this website for a client by editing a Bootstrap template and its working fine except that it keeps becoming unresponsive quite frequently.
Functions like zooming in and scrolling are almost always laggy.
What can cause mobile browser to crash(there is a popup in Chrome saying it has become unresponsive do I want to close app)?
Facebook works totally fine on this same device so I am sure it's something to do with my website.

Related

PWA on Android - Pinned app: clicking back button makes app stop working

we developed a progressive web app with Angular. It is perfectly installable and executable on mobile devices.
Our requirement is that our customers can pin the PWA on their mobile Android tablets. That is, the user cannot exit the app until he or she enters the pin of the mobile device.
Problem
If the user clicks the back button too often (in browsers this would cause the browser to show the default page as configured), the pinned PWA just shows a blank screen with the app logo. From there on, the user has no chance to do anything. In the end, our customer has to enter the pin and restart the app.
Is there any possibility to change this behavior as this is not happening with native android apps. We also tested the web.dev PWA which has the same behavior, so its not just a problem of our code.
Best regards and thank you in advance.
Eep, that is most certainly a bug in Chrome and Android. I've filed a bug 1174604 with the team and will ask someone to look into it. I'd suggest staring the bug so that you get updates as it gets fixed.

Android triggers jQuerys 'beforeunload' when screen turns off

I have the same website for mobile and desktop devices. One weird behavior I discovered is on mobile devices - Android and Chrome browser.
I didnt have the opportunity to discover exact trigger of the behavior but I think it has something to do with screen turning off.
I have this code before unload. On desktop it works fine.
$(document).on('beforeunload',function(){
$('.loading').show();
})
On phone it works also good but when I minimize Chrome or screen turns off and I wake up the phone. It triggers beforeunload event. Because of that I need to reload the page. I tried also small workaround that clicking on the .loading class will hide it, but with this behavior it doesnt work.
Any ideas ?

jQuery mobile on Android phone: pages rendered from brower's history are broken. How do I force a complete page rebuild?

All!
I have a perplexing problem that occurs only on some specific phones-- but they're the phones that my customer wants the app written for, so I need to deliver. :-/ The site that I am working on consists of fourteen jQuery mobile "pages", and two of them are exhibiting the following behavior:
I have an issue where pages being loaded from the browser's cache-- whether by pressing the browser's "back button" or simply reloading a page that has been previously rendered-- is broken:
While the page renders correctly, the bottom of the page is either "cut off" and can't be scrolled to, or a medium amount of "new" blank content is inserted at the bottom of the page.
When the latter occurs, the UI controls are "shifted" by the length of the new blank content compared to where the user was tapping: If an inch was "inserted" when the page is displayed for the second time, tapping on the screen triggers a click event in the location an inch "higher" on the page than where my finger touched the screen.
I will note that this problem appears to occur only on pages that have enough content to scroll off screen; pages that have small amounts of content do not suffer this problem. There is no dynamic content being added to these pages.
It appears that once a page is created and then a different page is displayed, something breaks in the DOM when the previously-created page is redisplayed.
The mobile sites run perfectly in Chrome and Firefox on a PC; they manifest themselves only on certain Android phones. One phone model that is giving me particular headaches is a Samsung SGH-I437P running Android 4.1.2.
I'm using the latest versions of jQuery-- rev 1.9.1 of jQuery, and 1.3.2 of jQuery mobile.
What I think I need to do is to tell jQuery to completely rebuild the page, but am unsure if this is even feasible, as the since the page has already been loaded into the DOM with all the jQuery mobile "embellishments"-- so there's no "bare-bones non-jQuery-mobile" HTML to rebuild the page with.
However, searching for page rebuilding / reloading hasn't turned up any concrete hits-- there was a way to do this with older versions of jQuery Mobile, but this does not work for the latest version.
Has anyone else experienced this behavior and know how to counteract it? My team of two have been focused on this for weeks to no avail.

Admob integration on different Android device

I'm new to Android development and my first application is looking good.
Curious if anyone has ran into problems with admob:
I have a ListFragment that displays a list with ads at the top and bottom of the list. The display is fine and everything runs ok except -
when I click on the ads and after the browser loads up, clicking back does nothing except for "going" back on the browser and it doesn't go back to the app.
Strangely enough this is happening on my Samsung s3 device but not on my HTC device.
This is because Samsung uses their own custom browser (not stock), and its deciding what to do with the back button. I don't think there's anything you can do- their browser has the focus, it gets to decide what to do with all IO. Your app is in the background and doesn't have any say over IO response.

Android browser refreshes page after selecting file via input element

I have a mobile web page which includes an input element of type 'file', to allow users to upload image files to a server. The page works fine on iOS, and on a Nexus 4 (Android 4.2.1) in the Chrome Browser.
When I use a Samsung S3 (Android 4.0.4) with the default browser clicking on the 'Choose file' button opens the image selection dialog as expected, however after I choose an image and close the dialog the web page gets refreshed, so I lose the image that was selected. Has anyone else seen this behaviour? Any suggestions for a workaround?
The input element that I'm using is fairly standard, and looks like this:
<input id="addPhoto" type="file" accept="image/*"/>
Even without the 'accept' attribute I get the same problem.
Have a look a this issue:
https://code.google.com/p/android/issues/detail?id=53088
Basically, what seems to be happening is this:
Android does not have enough memory available for the file-chooser or camera app.
It frees up memory by closing the browser
After the file chooser/camera is closed the browser is opened again, triggering a page refresh, which renders the whole file choosing exercise useless.
It seems to me that this is beyond the control of any browser based solution but I would love to be proven wrong on this assumption.
I'm having the same problem on a phone with Andriod 2.3.6. One of my colleagues does not have the problem on his phone (can't recall what that is running). He suggested it may be a memory issue. If the phone doesn't have enough available memory, the browser might actually be forced to reload the page after selecting the picture, which defeats the purpose. I have not yet been able to confirm that this is the problem, but my phone does have considerably less available memory than his.
You could try this JQuery Method: http://blueimp.github.com/jQuery-File-Upload/
Uploadify also looks promising: http://www.uploadify.com/
Here's a demo of it: http://www.uploadify.com/demos/
I think the problem is not your code, but the default Android browser you are using.

Categories

Resources