I try to find some workarounds for mobile safari bug:
For example I have a clear html page with
Viewport settings width=device-width, noscalable
Body with position:fixed
Two HTMLInputs created by js and placed to center of screen
All works fine on ever devices but on Iphones 6 plus and 7 plus we have a great problem:
If I've focus input and then hide keyboard, all window positioning become diverged from rendered position. Input could be only focused if I've click ~100px higher of it visible position. Moreover, each additional elements on page (even canvas with webgl content) also will get wrong coordinates on each tap/touchstart and so on.
I've connect iphone for debug, and I can see that browser thinks that input placed not where it rendered. Also i can vertically scroll page with finger, and real rendered inputs will stay in place, but area from browser will moves up and down right up to his rendered position.
Bug could be reproduced only if few tabs opened in browser in landscape orientation (i'll highlight tabs red on screenshot).
Can't reproduced on iphones5-6, because there is no tabs, but also can't be reproduced on ipad, which has the same tabs.
Example is here: http://baker-feather-16713.bitballoon.com/
Problem is the fact that safari allow user to scroll page to fullscreen ever if you set html/body width and height to 100%. So, when keyboard showed content scrolls up despite that body has position "fixed" and it rendered with bug when keyboard becomes hidden.
Solution is very simple: just need to do scrollTo(0, 0) when keyboard hidden, e.g.:
document.addEventListener('focusout', function(e) { window.scrollTo(0, 0) });
Related
when I try to make a Next/React project in which I have an invisible input.
Almost the whole page is my label for that input.
when I use my mobile browser and the soft keyboard appears it forces the page to be scrollable which interferes whit my design
I want to either adjust the size of the page so that the
height(page)+height(keyboard)=height(screen)
or
make the whole page unscrollable.
I don't know why but it is scrollable in Brave browser but not in Opera GX browser
I want it like it is on Opera GX.
I tried setting the overflow of html, body & #__next to "hidden"
but that didn't work.
You can see what I am talking about on my website: phew
The question
When window.onresize event is fired, the bottom menu should become hidden if window.innerHeight is smaller than it was at window.onload.
Will this behave consistently across mobile browsers and operational systems?
Rationale
This is the solution I found to deal with the fact that mobile keyboards resize the viewport when they come out. If the bottom menu is not hidden when the keyboard comes into view, it will get stacked upon the keyboard.
This solution works as expected on Chrome v80 running on Android 7.1.
I wonder, however, if the below cases are common, since they would brake the mechanism:
Browsers that won't trigger the resize event when the keyboard comes in and/or leaves
Systems/browsers that keep the keyboard visible while navigating to a new page, therefore making the initial window.innerHeight value different from the actual viewport size without keyboard
Important: Doing the toggling through Input focus/blur events is out of question. I've found that on my Android phone, when the System's go-back button is pressed, the keyboard hides, but the input does not lose focus, therefore the bottom menu stays hidden.
Mouse peripheral causes the styling of the scrollbar to change. How do I prevent this from happening or change the background color of the scrollbar box so that it matches the rest of my site?
This is the desired effect when I have scrollable content:
Without Mouse Plugged In
This is the undesired effect when I have scrollable content with a mouse plugged in:
With Mouse Plugged In
Here is a link to code that models the scrollable portion in question:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
I'm experiencing this issue my Macbook Pro (I haven't done any testing on a Windows device.) I'm looking for a solution that works in Safari, Firefox and Chrome.
all
I am facing an issue on safari ipad (both ios 7 and 8).
I have a page, in which the left part is a list and the right part is an iframe.
When clicking the list item in the left, the right part will be directed to some page accordingly.
I need to support scrolling in the right part (iframe).
Currently, the right part is like:
<div style="display:block; position: absolute; overflow:auto; -webkit-overflow-scrolling: touch"><iframe src = 'xxxxx'>... </iframe></div>
xxx is dynamically generated in javascript when clicking the left part.
when iframe loaded, the page inside the iframe has a floating button bar, clicking the button can jump to different part of the iframe by scrolling it.
Now, when clicking any floating button in the bar, I use document.body.scrollTop = nnn ( or document.documentElement.scrollTop = nnn ) to scroll to different part. It works fine on desktop browsers (chrome, FF, IE, even safari). And, it scrolls the right part only, not the whole screen, which is what I want.
But, in ipad, in both ios 7 and 8, none of the floating buttons works. When clicked, you can see the iframe flashes, but not scrolls. User can still manually scrolls the iframe though.
Any suggestion on how to make this scrolling work programatically? Or, is this a known issue on ipad ?
Thanks.
Also ran into this post: Scroll iframe using buttons - iPhone, looks similar to my issue.
i have an input field, in a browser where the content is not shown entirely,Like below image.
The webpage is for tablets and phones. If I want to make a correction before Submit, on the first touch the caret is positioned where the touch happens but if I want to correct my position on second touch the caret is positioned at the end of the text not where the touch happens, I have this strange behavior only on iOS 8. It's annoying on small tablets since the content usually is longer than the input field.
Is there a way to position the caret where the touch happens?