I'm having an rare behavior in Safari and iOS6. When changing from landscape to portrait, the viewport is resized, but it seems that is no correctly positioned horizontally. It's displaced exactly 128px to left.
I'm able to reproduce this behavior with an iPad3 in iOS6 going to www.google.com
If you change the display property of the html like this:
document.querySelector("html").style.display = "none"
document.querySelector("html").style.display = "block"
the viewport returns to origin and its displayed correctly. That's why I think that this is a bug.
Any ideas how to fix this?
I had noticed a similar issue this morning.
Anytime orientation changed from landscape to portrait, the whole body element would be shifted almost halfway to the left, when it should be 100% width. This was mobile safari in iOS 6, running on an iPhone 4s.
I nailed it down to the full width search bar I had. On the parent element of this bar, I placed a property of overflow: hidden;
This ended up solving my problem. I spent a long time inspecting other sites and this may not fix your issue. For example, my fix didn't seem to take on BestBuy.com which is encountering the same issue as well.
This bug also applies to IOS6 on iPhone.
Removing and reading the placeholder in an orientationchange handler will fix the problem. This solution is jQuery specific:
$(window).on("orientationchange", fixIOS6PlaceholderBug);
function fixIOS6PlaceholderBug () {
var $this,
originalPlaceholder = "";
$(document).find("input[placeholder]").each(function() {
$this = $(this);
originalPlaceholder = $this.attr("placeholder");
$this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
});
}
I found the solution thanks to this:
http://www.tonylea.com/2010/safari-overflow-hidden-problem/
I had overflow:hidden in my HTML tag, since I have some rotating DIVs hidden left and right, but it seems that Safari in iOS6 wasn't accepting that. Setting position:relative to HTML tag solved the problem for me!
I have the same bug, but in my case the reason was a input type=text with width: 100%; and when I changed input wrapper to overflow:hidden bug was fixed;
Solution with overflow:hidden for body is bad for inertial scrolling on iOS
I had to add overflow: hidden to the body tag.
Related
My Google Street View iFrame loads fine but when I touch inside the image of the Street View map the page jumps to the bottom. This only happens on my Iphone 5s as well as my IPAD.
If I click on one of the controls it does not jump - but as soon as I touch the screen as if I want to drag the view to look around the page jumps to the bottom.
This happens on two of my websites where I have embedded the Street View Iframe so it cannot be specific to the website.
Can anyone advise how to prevent this annoying jump?
My website is http://www.360tours.co.za
I have the same problem. It seems to be related to iOS 10. Testing on the ipad3 with iOS 9.3.5 it works fine. Embedding it in a simple html page with only the iframe it seems to work fine. Looks like a combination of certain things.
I was able to solve this using this trick:
body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
Something to note - if you have absolutely positioned elements which are direct children of body (e.g. header), this will cause other issues on iOS - so you would need to wrap the site in a relatively positioned container.
adding this code
`body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
} `
caused dissapearing CSS animation in IOS on my site. May be due to "if you have absolutely positioned elements which are direct children of body"
didnt catch how to solve this issue so i just removed overflow and everything works fine now
nevertheless Thanks
The luma theme of magento 2 has a bug.
When iam on an iphone and open the menu the menu opens to far.
It streched past the right side of the screen.
If i do this on android the menu works perfectly.
I was looking at the css code and i found that the menu width was calculated using calc();
It substracted 54px from 100%.
I thought iOs couldn't handle calc but this was not the problem.
Then i tried to fiddled with the width of the parent elements to find the calculation problem.
The problem was that none of it fixed the problem.
And even weirder was the fact that on android it kept working correctly.
Does anyone have this problem also with the luma theme?
And possibly found a solution.
Thanks in advance for you help.
On our website https://dampershop.nl we solved this problem by changing a bit of css.
We added:
html.nav-before-open, .nav-before-open body {
overflow: hidden;
position: relative;
height: 100%;
}
This makes it so that iphone/ios devices opens the responsive menu correctly.
I hope this helps!
I know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
I tried adding -webkit-transform: translate3d(0, 0, 0); to the fixed element and it doesn't seem to help this problem.
Here is a jsfiddle as well.
Update
I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update2
I added -webkit prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT:
In your code,
Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Update 1: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update 2: I added -webkit- prefix and this DOES fix the z-index problem on mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. "
Then try to wrap -webkit-transform:translateZ(x) in a mobile specific media query.
For example:
#media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
I used the same value for the z-index and translateZ just for consistency, it is not necessary.
See working example http://jsbin.com/peyehufo/5
I'm not advocating for this solution, but it's the best I've got at the moment...
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
As suggested by #tnt above, use transform:translateZ(n) where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...
Instead of position:fixed, use a javascript technique like this to fake it.
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
I'm using fancybox, and it seems that many people who use it disable zooming of any kind on mobile devices. The problem is that when I have a fancybox open, completely zoom in while the fancy box is open, completely zoom out, and then close fancybox. When I scroll the body, depending on the direction of the scroll, there is a lag where a top section or bottom section is chopped off, and then revealed after a split second delay.
I found out that removing the position fixed style from the overlay removes the issue. I also saw that on caniuse.com that fixed positioning only has 6% support, including iOS 7.
Are there any workarounds that can fix this issue with fancybox? Thanks.
edit
I found this other SO question, that might help for reference: CSS "position: fixed;" on iPad/iPhone?
On your div put:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
I'm building a mobile app for IOS, with html5. I'm using "-webkit-overflow-scrolling: touch" to get the native inertia scrolling, but it's very buggy. I've solved the issues with content not rendering until the scrolling stops, but one persistent bug is this:
When I try to scroll up and down, nothing happens, but when I try to scroll horizontally, the content scrolls vertically (90 degrees off axis). If I navigate around my app and come back to the page, it will sometimes be fixed. Also, sometimes it won't scroll at all, despite being full of content.
From what I've googled, the consensus seems to be that Apple is aware of this bug, and has no intention of fixing it any time soon. Has anyone found a solution to get -webkit-overflow-scrolling to work correctly?
I also have struggled with this bug for months. The best characterization that I've found is:
https://bugs.webkit.org/show_bug.cgi?id=87391
which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.
I encountered the same problem: a node using -webkit-overflow-scrolling: scroll that would intermittently scroll up/down only with a left/right scroll gesture.
Here's what I found to be possible causes:
iframe present on the page anywhere, visible or otherwise (source)
visibility: hidden applied to any parent of the scrollable node (source)
However, none of these situations were present in my web app. I had a scrollable <ul> inside of a pure CSS modal dialog that I wrote which used a clever trick to add a transparent underlay -- an ::after pseudo-element with position: fixed.
When I removed the position: fixed from the pseudo-element, the problem went away! Of course, this made my clever trick useless, but it was interesting to learn that this bug could be triggered by this situation.
Device: iOS 5.1.1 on 2012 iPad 3 (retina)
Offending code:
/* Underlay */
.dialog::after {
z-index: -1;
position: fixed; /* <--- This was the problem! */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
content: "";
}
tl;dr: if containing elements have a fixed position pseudo-element, removing it could fix your scrolling problem.
I know that the issue is kind of old, but I had to make my website work on iOS 5. Unfortunately i couldn't remove nor replace the iframe. I've noticed that the presence of iframe caused the problem only if it was rendered before the element which was ment to scroll smoothly. Appending iframe to the document later (after the element with -webkit-overflow-scrolling: touch) fixed the problem :)