QUESTION: Based on the given examples for homescreen web apps in iOS7 Safari, how can I achieve both a fixed persistent header that never scrolls out of view, and form input fields that scroll into view when tapped?
The two examples have one difference, one has height=device-height in the viewport, the other doesn't.
Without device-height
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
Demo: http://run.plnkr.co/plunks/SU8Csk/
Edit Link: http://plnkr.co/edit/SU8Csk
The good: The fixed header does not change position/height when tapping the fields.
The bad: The user cannot see the focussed field without manually scrolling, or pressing the 'next' button. This can be very tedious, especially if the fields are on a page that doesn't overflow.
With device-height
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
Demo: http://run.plnkr.co/plunks/rPoyaB/
Edit Link: http://plnkr.co/edit/rPoyaB
The good: The user is scrolled to the focussed field as desired.
The bad: The fixed header scrolls completely out of view, this needs to be persisted on screen at all times. The scenario is, it will contain a cancel button and a save button that should always be accessible. Also when the field is blurred, the header itself looks squashed until the user scrolls it down into view, but if overflow is disabled then they can't even do this.
The ugly: On my non-trivial, real code, away from these simplified examples, there are a bunch of elements that are positioned absolutely within the header to create a curved line 'tab' effect, the alignment of these goes completely off.
You should be able to open each demo URL in iOS7 Safari, add to Home Screen, and launch to demonstrate the issue.
What is the best way of resolving this?
NOTE: I am aware that there are 'bugs' in iOS7 Safari, particularly when it comes to homescreen web apps, however I believe that a
workaround may exist related to how I
am structuring the page. I have done a large amount of research (see
below) but I am struggling to find a solution.
Related links to 'fixed header' issue: Need Fixed Header in ios7+, How does one get a fixed header to stay at the top of the page?,
Fixed headers with text fields on mobile safari websites,
iOS 5 fixed positioning and virtual keyboard,
Issues with fixed header, footer and side bar on ipad / iphone,
CSS "position: fixed;" on iPad/iPhone?,
Fixed positioning in Mobile Safari,
How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?,
web app - device-height / keyboard issue,
Div element won't stay at the bottom when ios 7 virtual keyboard is present,
iOS web app: disable autofocus on input text field, disappearing position fixed header in ios7 mobile safari,
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/,
https://github.com/jquery/jquery-mobile/issues/5532,
http://dansajin.com/2012/12/07/fix-position-fixed/
Related links to 'input fields do not focus' issue: webkit-overflow-scrolling forms broken on iOS 7 full-screen web app,
Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down,
ios7 issues with webview focus when using keyboard html,
How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?,
Mobile Safari Autofocus text field,
iPad browser requires extra tap after appending input,
Tapping text input field on iPhone brings up keyboard, but typing will not put in any text,
`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7,
http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html,
http://calendee.com/ios-7-kills-forms-in-html5-apps/
You should check out this answer -
fixed position div freezes on page (iPad)
And here is a really good article by Brad Frost that I've desperately read through a few times myself over the years hoping for an answer to this dilemma. -
https://bradfrost.com/blog/post/fixed-position/
It answers what you're asking pretty thoroughly. Fixed positioning is broken on mobile, it can be massaged with JS, but not really even completely fixed.
You can fix one problem, your "header glitch" in demo 2 is just the fixed header hiding behind the absolutely positioned #page. Give your header a z-index of 1+ and that will fix that issue.
As far as the header losing positioning when the keyboard comes in; I'm not even sure that's actually a bug, just the nature of the browser. What's happening is that the keyboard is gaining focus, at that point you're now dealing with ios' UI not the web browser and everything in the background is freezing (including fixed positioned elements and all other elements). Notice how the entire screens scrolls, that's not a web feature it's a built in browser feature.
Related
I am facing this weird issue which I think is because of apple keyboard. When I tap on the input field, the keyboard comes from the bottom and the cursor moves off down like this:
And when I scroll up with the modal open, it comes back to place like this:
What could be probable issue?
This is a known issue in iOS 11 which happens when an <input> element is inside a position:fixed container and is thoroughly described in this blogpost.
The workarounds are for now:
Making the modal window position: absolute instead of fixed
Hiding the content behind the modal with display:none and stretching the modal to cover the whole page
Avoiding modals altogether
None of the workarounds is particularly a 100% solution, but none of the iOS 11 updates have yet fixed the issue.
The entire screen flashes blue briefly with mobile chrome and hyperlinks using responsive.menu in wordpress. I'm looking to remove this effect.
You can reproduce the issue by using chrome and putting the browser in mobile mode. Navigate the browser to http://responsive.menu and use their menu on the right hand side, simply click the plus and minus arrows on the sub menu to demonstrate the effect.
Also, a screen shot and screen cast:
Shot:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08RjJ1T1IxU2JDTjg
Screen cast:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08cTRJbXNNTGdjcmM
From the author of the component:
it is due to the fact that for mobiles to detect a click event on the
body of the site without reverting to loading the jQuery mobile
library, I have added cursor: pointer; to the body.
This has the side effect of creating these blue flashes on mobile
Chrome as the browser now thinks that the whole body is a link. The
quickest option is to turn off the "Click to close menu on body
clicks" option while I see if there is a workaround in the long term.
The only way around this I can think of is to load jQuery mobile
separately, but I was always reluctant to do this.
Question update:
This only happens on chrome mobile - how do you emulate safari and firefox mobile behavior?
I'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}
I'm running into a relentless fixed position bug in Safari. I'm on iOS9 but I've noticed it in iOS8 as well. To reproduce the problem (example link below):
position fixed element over the entire screen
fill it with enough content – including a form with several inputs – so it's scrollable
set overflow scroll
open it in mobile Safari
scroll down until you see the first input and tap it to focus
scroll a bit more and focus the next one (and notice the elastic looking jump)
scroll a bit more and focus the next and keep going. The more inputs you focus the more insane the jump gets.
Example: http://jsbin.com/zaruba/edit?html,css,output
Any help is appreciated.
Try this meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
user-scalable=0 is not valid.
From Safari development library, supported Meta Tags:
user-scalable
Determines whether or not the user can zoom in and
out—whether or not the user can change the scale of the viewport. Set
to yes to allow scaling and no to disallow scaling. The default is
yes. Setting user-scalable to no also prevents a webpage from
scrolling when entering text in an input field.
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.