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.
Related
I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?
Thanks.
Code Here: Codepen
You need to add following code to the head section (before title tag):
<meta name="viewport" content="width=device-width, initial-scale=1">
From HEAD
meta name="viewport" - viewport settings related to mobile responsiveness
width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
initial-scale=1 is the initial zoom, 1 means no zoom
For more info about viewport tag see: Using the viewport meta tag to control layout on mobile browsers
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 have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.
It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.
Btw, I have set
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.
But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.
So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.
Thanks a lot in advance, mates.
Set your box model for the the #container and #header divs to border-box:
box-sizing: border-box;
You may need to prefix this depending on what browsers you are supporting.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
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.
I have a small mobile phone app that is acting strangely on the iPhone/Mobile Safari. The page renders and works great when it's orientation is vertical. When I rotate the phone horizontally some, but not all elements on the page resize correctly. Some header elements will stay nearly their same size, maybe increasing by 10%, others will double in size.
Has anyone run into this? My first thought was that the css could have a mix of sizes based on ems and px's but finding every size element and converting them to em's didn't change a thing.
It's because Mobile Safari on iPhone & iPod Touch does automatic font-size adjustment.
You can disable it with the following css rule,
html {-webkit-text-size-adjust:none}
More info from Safari Reference Library
Have you tried including a viewport meta tag, such as this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Otherwise, you could try creating orientation-specific CSS stylesheets and swap them out w/ javascript when the orientation change event fires, but I prefer the meta tag method above.