On iOS7.1 you can hide Safari's toolbars with something like
<meta name="viewport"
content="width=device-width,
target-densitydpi=160dpi,
initial-scale=1.0,
maximum-scale=1,
user-scalable=no,
minimal-ui">
This is great. If the user scrolls or click the top of the window the toolbars appear. if they click the content the toolbars disappear
But on iOS8 clicking either the top OR THE BOTTOM brings up the toolbars and they NEVER GO AWAY. This completely ruins my webapp
Is there a workaround for both of these issues?
Make it so clicking the bottom does NOT bring up the toolbar. In my web app I have buttons at the bottom.
Make it so clicking the connect removes the toolbar. With so much of the screen taken up by UI chrome my app doesn't have space to work
I would suggest read this post iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? and the question should be more specific (iOS8 only in old iOS devices <=5S), because, in iOS into the iPhone6 and iPhone6 Plus have a different behavior, it's not possible to open the toolbar if you tab in the bottom of the screen.
If you're referring to the frosted bar at the bottom with four tools (send page, multiple window option, etc.) then sometimes if you hold your finger on the middle of the screen and scroll up (moving the page up) about one inch then that bar disappears.
Related
some body help me~~
My Issue is this
IOS is Normal operation. but upgrade ios11 a bug broke out.
Scroll down quickly, My header menu hide, and scroll end than menu show.
My header is 'position:fixed;top:0;left:0;width:100%;height:50px;' had property.
Why does this happen?
i tried css edit and meta tag change...
Same problem.
Application develop with cordova and using uiwebview on ios.
The css fixed elements have strange comportement : Hide, hide on scroll.
Try to look at this : https://ayogo.com/blog/ios11-viewport/
If it could fix
<meta name="viewport" content="..., viewport-fit=cover">
I'm testing our app and can't solve this problem with our developers.
On the app page, there are top bar, tab bar and scrolling content.
When the content is scrolling, the top bar button, (back, add to fav, etc) just won't work.
It makes the app seem slow when using it.
(Sometimes your finger already left the screen, but the content is still slowing down scrolling)
I tried Facebook and airbnb, and either of them has this issue.
See screenshot here
Here is the context of my problem :
I have a client application (ObjC)calling a player.jsp file located on the server (Java), to display it in my application in an UIWebView. The Java application is a web application which displays learning formations and i have to build an application to display these contents on an iPad.
The player in the web app uses iframes to display the content, and in my iPad application, i'm just loading this player in my UIWebView and it works, but with some sizing problems.
This player can open any type of files but I'm focusing only on HTML files.
The problem is when i switch to Landscape orientation, the content isn't resized as it should be and i can't scroll either.
When i launch the application in landscape, the size is good. Then i can switch in portrait and the resize is also done. The problem occurs only from portrait to landscape (the width is actually good but the height is too high and i can't scroll... it's not resized to the size of the launch of the app in landscape mode)
I've been searching for an answer for couple days now, been reading that adding :
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
into the header of my HTML files would help, but it actually doesn't. It actually even does no difference at all.
Any ideas ? Thanks
I had a similar issue, not resizing but rotation issues in general and this seemed to fix it
iOS Orientation Issues
I know its not the best help, but it didnt solve some rotatin issues aswell as resizing!
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
I have a web app designed for the iPhone 3 using css3 & html5. Moving to the iPhone 4 and retina display has been a bit of a challenge, even after reading about "css pixels" vs "physical pixels".
My web app creates quite a few pages that are "hidden" off the right side of the screen and buttons on the "home screen" slide the desired page onto the screen. I use the following transform to hide pages offscreen:
-webkit-transform: translate3d(+100%,0,0)
All works well on the iPhone 3 but the iPhone 4 displays both pages side by side, I presume because the retina display is twice as wide.
I've been able to solve that problem but changing my meta tag from:
<meta name="viewport" content="width=device-width,user-scalable=no">
to:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">
and using the display attribute to hide the pages offscreen:
display: none
but I still have one problem I can't solve. On the iPhone 3 rotating the device to landscape scales the text larger. On the iPhone 4 the wider screen is used but no scaling of text occurs.
Any suggestions would be greatly appreciated,
Tia
You can disable this behavior through the -webkit-text-size-adjust CSS property:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
The use of this property is described further in the Safari Web Content Guide.