We are facing an... interesting issue. This is specifically happening on iOS 7 in Safari when you tap on an anchor or input element.
Currently we have "-webkit-tap-highlight-color" for iOS < 7 to disable the gray box around the link on tap. We also want to remove this border in iOS 7. Setting outline to 0 or none doesn't get rid of it either.
There doesn't appear to be anything mentioned in the new Safari in
Apple's docs.
The site is househappy.org
Anyone dealt with this yet? Ideas, suggestions? Thanks!
This was happening to me and it had to do with the meta tag allowing zoom
Applying a meta tag to disable zoom solved my problem (user-scalable = no)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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">
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.
Add this webpage to your iOS7 home screen
Open it, and focus the input field (the keyboard pops up)
The text turns red, as the phone thinks it is in landscape mode
Is there any way around it? Or should we just blame Apple?
Note: This problem only occurs in app-mode, not in regular Safari browsing mode. And it worked fine in iOS6.
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
body {
color: blue;
}
#media (orientation:landscape) {
body {
color: red;
}
}
</style>
<body>
<h3>this text will go red when in landscape</h3>
<input type="text" />
</body>
This is clearly an iOS7 bug. In my application I found that I can reliably distinguish portrait mode from landscape mode even when focused on an input field with the on screen keyboard open using this media query:
#media only screen and (device-width: 768px) and (device-height: 1024px) and
(min-aspect-ratio: 4/3) {
/* landscape differences here */
}
I couldn't use orientation: landscape because the rule would get activated even in portrait mode if the keyboard is open.
I probably need a different rule for the iPhone but I haven't gotten that far yet.
The keyboard orientation bug effects some web browsers as well, not just app mode, but hopefully this can be used in either instance. It also seems to effect some Android devices.
Here's how I got around it for mobile web browsers:
#media only screen and (min-device-aspect-ratio:1/1) and
(max-device-aspect-ratio:3/2) {
/* Landscape-to-portrait corrections here */
}
The idea is that this query can only fire if a screen is either a perfect square or close to square, a scenario that pretty much only occurs when a keyboard is raised on touchscreen devices. The aspect ratio values I've used translate to between 1 and 1.5, so as an example a 16:9 screen has an aspect ratio of 1.7777778 (16/9) and would not be targeted. Once the MQ fires, you can re-style the effected elements. This doesn't fix the bug, it just conceals it.
If an OS doesn't contain the bug, this query will never fire, so if Apple fixes this, you don't need to change your code if you don't want to.
If a device is genuinely flipped to landscape mode, the aspect ratio only increases, and even moreso if the keyboard is raised, so the bug should never appear when a device is on its side.
To my knowledge, there are no devices with square/almost-square screens out there that would pick up this media query (at the time of writing), but please correct me if I'm wrong.
This has been tested on an iPhone 5s in Safari, Dolphin and Mercury browsers running iOS7, and in Chrome on an Android One X running Android 4.2.1 (which also experiences the same bug orientation bug with keyboards).
I also checked to see if it would fire on a Blackberry Bold 9780 (480x360), and it didn't. I don't quite trust this, as the resolution should have made it fall within the target range and it loaded the other MQs just fine, so perhaps it assesses the aspect ratio based around the physical size of the screen instead of the number of pixels. This is potentially an instance where the media query applies your bug solution to a screen that isn't experiencing the bug.
It's not perfect, but it got me out of trouble after a lot of headaches.
innerHeight is now affected by the keyboard being up in iOS7. If you check the innerHeight vs innerWidth with the keyboard up when the device is in portrait you will find that the innerHeight < innerWidth so maybe the browser's orientation check is as simple as that instead of using the device orientation straight up.
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 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.