I'm developing a mobile application that is basically an iframe. The fact is that sometimes the content is duplicated when browsing in iframe (click on links, back button ...) and I scroll down. Both the app and the android default browser same thing happens, so I rule out problems on the app (phonegap). I have not seen this error in any desktop browser (chrome, mozilla, ie).
Can anyone help me?. Thank you.
Related
I'm working on a Squarespace website (I can't post the link because of privacy reasons). I'm adding an announcement bar to the site, for covid info. It works fine almost everywhere, except on chrome in android. On that browser, when the page is first loaded, the very top of the text is cut off. Here's an image:
Image of bar cut off. (sorry it isn't a screenshot my phone won't take screenshots in incognito and it was in incognito for unrelated reasons).
Chrome won't allow me to scroll up anymore, which would correct the issue. When I reload the page, it starts off looking the same. However, I now I do have the ability to scroll up.
I've attempted a couple of solutions. Firstly, I've tried to set the z index of the bar higher. But that didn't help. I've also tried to add a script which automatically scrolls the user to the top using window.scrollTo(0, 0); but that also failed.
Sorry I can't show code, it's a Squarespace site. I hope someone can help. Thanks.
Edit: I've done some checking and it happens on computer chrome too when I make the screen small enough, but NOT when I switch "devices" in inspect element. However, the problem isn't there on iphone. Chrome on iphone uses webkit, while on other devices it uses Blink, so I think Blink may be the source of the issue
I am using OpenSeaDragon to show images on my website. With the desktop browser everything is working correct. Also in device mode with the DevTools from chrome. But when I switch to a real mobile device, I can't change to fullscreen mode.
The view try to expand, the buttons slide to the top, but cancels itself immadiately.
I have build a small Android application with a webview to access the website.
I even don't know, if it is a Android issue or an OpenSeaDragon issue. Any hint what I should check could be helpful.
Thanks in advance
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.
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.
I am building a page for Android, and it uses CSS. The phone I am testing on right now is ICS. I've found that in the native browser, when i click on a div with a higher z-index than the page I actually activate the elements behind the divs. This means that I inadvertently tap ads and links that take me off the page.
This does not happen on the ICS chrome browser though. Does anyone have an idea of what I can do to remedy this so that my div is what gets tapped?
Thanks,