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,
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 working on a hybrid application.
My webpages are responsive when i check them in browser inspect window on iphone screen.
But when when i used them in ios, it does not remain responsive anymore.
Any idea about problem and solution?
The same issue is resolved in android by first zooming out the page and the zoom in according to screen size. But it is not working here.
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.
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'm using MediaElement.js to make a responsive web application.
However, I have some issues to make it work on Android Chrome browser (I have a Samsung Galaxy S3).
When I try to open a video, the fullscreen button is misplaced: probably the "toolbar" elements are too big, and the last button (i.e. fullscreen) get placed in the next line.
It happens even in fullscreen mode: the fullscreen button disappears.
The same behaviour can be seen in the demo video on mediaelement.js website too.
Looking at the site on Chrome for Android's DevTools the button has an off by one error.
To learn more on how to do this yourself: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
If you open devtools, you can alter the video scrubber (The bar in the middle) and reduce the size by a pixel and it's fixed.
I'd raise a bug with MediaElement.js - if their CSS is 100% correct then it may be a Chrome specific bug in which case a bug should be raised at crbug.com