I have a site where everything is fine on desktop (FF, Chrome, IE), but when the site is opened on ipad, if a cell is edited and the keyboard popup, the page will scroll down or up automatically after the edit is completed (click outside of the edit box or click "Go").
the url is http://bambootextiles.com.au/cgi-bin/order.mobile.pl
How to avoid this annoying behaviour?
Thanks
Related
When typing into a text box with the on-screen keyboard and then tapping on a clickable element while the keyboard is still open
the on-screen keyboard disappears as expected
the tap is ignored, I see in the debugger that the click event handler isn't even reached
tapping on the clickable element again, it now works as designed.
Tapping on other elements on the page with a click event handler while the keyboard is open works fine. One difference is that the unclickable button comes up only while typing, as it is in an autocomplete dropdown, a <ul> element switched visible by removing display: none after the third character is typed.
This happens on Firefox for Android, recent versions. It works in Chrome. Safari on iPad works, but only since the recent 16.x upgrade.
This looks like a weird browser vs platform quirk. Does anyone happen to know a workaround or can even explain some background
EDIT after further experimentation I have a fairly minimal jsfiddle to demonstrate the problem. It seems that Firefox on Android ignores click handlers which are attached to HTML elements created while the on-screen keyboard is open. Wouldn't mind if someone could confirm in a comment that I am not alone with my FF while waiting on an answer from someone in the know.
When moving and displaying a div in a Fancybox iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is what I want).
https://embed.plnkr.co/MhUHCeAaN6VVsllmovTj/
Steps to reproduce:
Navigate to the above url on an iPad using Safari
Tap "Open Fancy Box"
Scroll down and tap the "Click ME!" button
Notice the iFrame scrolls to the top.
The button creates a div, moves it to the top right of the point that was tapped, and makes it visible.
I confirmed this behavior on:
iPad (iOS 11.2.6)
Safari
Chrome
Mozilla Firefox
iPhone (iOS 11.2.6)
Safari
I confirmed this behavior does not happen on:
Windows 10
Safari (v 5.1.7)
Chrome
Mozilla Firefox
Android (7.0)
Chrome
I have tried the answer provided in this thread: fancybox2 / fancybox causes page to to jump to the top, but the iFrame still scrolls up after the button is tapped, and then locks the iFrame so you can't scroll back down.
I also tried using jQuery to scroll to the desired div (selecting with an id) after the onclick function finishes, but the iFrame doesn't move. Using "SLaks" suggestion here: How do you scroll an iframe from within using jquery?
I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.
One my webpage I have a bootstrap model opened which has a form with two text boxes and few buttons. When I touch text box keyboard opens which is what I would expect but when I press done (on top of open keyboard) to close keyboard, safari on iPhone it scrolls all the way to the top of the page. This is causing model to loose focus and scroll events are being sent to underlying main page. So the question is, is there any way to get keyboard close event so that I can override this behaviour or any other way prevent it from happening. It's only happening on iPhone chrome and iPhone safari. It works fine on android chrome.
I have a site that uses pop-ups for certain areas of the site (which have target="_blank"), and I have noticed that Safari on iOS devices tends to open these pop-ups in the background, while keeping focus on the current tab, and not switching to the pop-up when it opens.
Is there a way / workaround to prevent Safari acting like this and instead open them in foreground and focus on them when they open?
Thanks!
There's a problem with Twitter Bootstrap's dropdown menus on mobile. If I use Android's stock browser and click on a menu, it will open and close in less than a sec without me doing anything else. The same thing happens if I press the dropdowns on the official Bootstrap site, so this has nothing to do with my code.
If you want to keep the dropdowns open and fix this, you have to tap them for a little bit longer, smth like 1 second. But obviously I'd like a simple tap to be enough.
Is this normal for Android's stock browser? In Firefox and Opera Mini dropdowns work just fine.
Thanks!
PS: no, I don't have any form inside dropdowns. Only links that work fine in other browsers.
This is an android browser thing. They handle links with dropdowns as both a hover and click. Other browser such as iOS handles menus with dropdowns as just the hover then another click to initiate the link.