i have a problem with a site i created recently (www.ppdcstudio.com), but only now found a problem with iOS7 (still works as expected with desktop and previous versions of iOS).
I have a position:fixed top bar (logo and menu) that has responsive width. the logo is kept on the left and the menu on the right. when resizing the browser they get close together and the menu collapses and you get a html-select kind of menu (actually it is a block with hidden li's).
The problem it self is that in iOS7 it doesn't show the menu at all, and the pages are all messed up.
(i think the menu is there, but i can't scroll to see it cuz of position fixed)
I used this as a fix for devices when first made the site but now i think this might be what's causing the problem:
<meta name="viewport" content="initial-scale=1,maximum-scale=0.75,user-scalable=yes" >
<meta name="viewport" content="width=device-width; height=device-height;">
any advice?
thanks
Related
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;
}
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.
Just testing the responsiveness here by resizing the page to much smaller size in chrome but the menu shifts to the next line http://a-s-team.com/shoploop/index.html
I tried in chrome press ctlr and scroll down. You will see the menu moving to the next line. This would happen in most of the mobile browsers. Any way to fix it?
I think the reason of this is font-size: 12px; Try to to use % insted of px
This is a far from optimal solution, but it does solve the problem: you could prevent zoom altogether on mobile devices:
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
If you add this to your page and visit it on, say, your iPhone, you can see that you won't be able to zoom.
I am a little confused with the behaviour of my Twitter Bootstrap based navigation header. In Desktop based versions everything seems to be just fine, however when browsing from the iPhone/iPad I get a weird white spot on the right (which also seems to define the positioning of the Tumblr controls.
How do I go about debugging this? Anyone have any pointers? Thank you so much.
The actual code lives here http://thegodfounder.com/
Edit 1:
Changing the viewport to "width=device-width, initial-scale=1.0" as suggested by #baptme actually scales the viewport to where the black ends and hides everything on the right. What am I not seeing?
Edit 2:
1) Adding the suggestions of float:left & min-width:100% to body results in actually filling the white space, but there still seems to be something fishy: The Tumblr controls are still there in the middle of the page, and on pageload it loads right to the right of the Tumblr controls, as if there was some break point or so, but I am not aware of any?
2) And am I not getting the concept in using the Bootstrap navbar right, when it's not supposed to be fixed to the top?
replace
<meta name="viewport" content="width=device-width">
with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT:
I remove the responsive behaviour and the position:fixed from the twitter bootstrap .navbar I end up with the same problem
If you don't want the .navbar to have a position:fixed you can use media queries to avoid the .navbav width to be wider than the viewport.
EDIT 2:
The float: left and min-width: 100% to body from #MyHeadHurts comment is definitely the best way to fix it. Even if I wouldn't expect those 2 properties together to do that, it works.
EDIT 3:
Remove <meta name="viewport" content="width=device-width, initial-scale=1.0"> if you want your page to scale according to the viewport.
I recently built a site and centered it using margin: 0 auto. I also wrapped elements in a .wrapper class with a width set to 960px and then had the parent element extend across the whole browser.
When I view the Brands screen on an iPad though, the site is left-aligned and does not extend across the whole window. Any thoughts to why this might be happening, and how to correct it?
See below for a screenshot:
Looks like you’ve got a few validation errors on that page:
http://validator.w3.org/check?uri=http://www.propet.com/brands/&charset=(detect+automatically)&doctype=Inline&group=0
I suspect they might be causing the issue. If you look at the page in e.g. Chrome, you’ll see a horizontal scrollbar and space outside your wrapper <div> there, so the issues aren’t limited to the iPad.
This works for a centered webpage with a width of 1024px:
<meta name="viewport"
content="width=device-width, initial-scale=0.95, maximum-scale=0.95">