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.
Related
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 have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.
I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.
Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.
I have included a screenshot:
I have never seen anything like this before. What could it be? thanks verymuch!
ADDITION:
Here a live example:
example offline, sry
Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.
ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...
Put...
<section id="main-top">
<div id="bg">
inside the .container. You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.
Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.
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.
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 :)
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well,
but it causes touch events stopping work out of the scrolling area.
Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: I have fixed this problem but I still no wonder the real reason.
In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
Hope this helps!
This is caused by having an <iframe> on the page. Many scripts create <iframes> to do their work including social tracking buttons (Facebook, Twitter, G+), analytics tracking (Google, etc.), and libraries like PhoneGap.
It doesn't matter how the <iframe> is displayed. display: none; visibility: hidden; width: 0; height: 0 does not fix it. If an <iframe> is on the page it will happen, sometimes intermittently and sometimes always.
The only solution I've found so far (which is turning out to not be very workable in a production app) is to delete all <iframes> on the page, create them only when needed (for example, when I need to call a PhoneGap API), and then delete them when finished.
I confirm I saw the same issue on a web app using extensively touch events and list scrolls.
Before iOS5 I was using iScroll, and everything was working fine;
With iOS5, I used -webkit-overflow-scrolling:touch to scroll lists to get faster scrolls.
The consequence is I met random occurrences of touch events no more working on various parts of the app. The issues generally occur after I scrolled a list. it affects randomly elements outside the scrolled area, typically a footer menu.
Reloading the app when in 'frozen touch' state doesn't unfreezes it : to unfreeze it, I had to close the safari tab, open a new one and reload, until I met again the issue while using the app.
The issue is seen on iPad2, iPhone 4, iPhone 3GS, all on iOS 5.0
Eventually, I deactivated the overflow touch scroll and came back to iScroll, and things work well as in iOS4 .
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch stops responding.
My phonegap app will work fine until I make a call to a Phonegap API, at which point the touch will stop responding on mainly the first element that has a event attached to it in the current view. A view for my app is body > div.current with the rest of the divs display none.
I can replicate this every time.
It is clearly a bug in iOS5.
Here's a variation on a few of the answers already listed.
My specific issue was that reorientation caused scrolling to stop working completely when -webkit-overflow-scrolling: touch was applied to an element.
Example: Landscape orientation is shorter and needs a scrollbar. Portrait is tall enough that no scrollbar is needed. Reorient to landscape; scrollbar is present but non-functional.
listen for the orientationchange event
do something which triggers a layout change on the scrolling element
ensure that the change is significant enough that the rendering engine doesn't optimize it away. For example, hiding then immediately showing does not seem to do anything. Anything that uses setTimeout() seems to work (perhaps it is the different execution context, I don't know).
Fading in and out works, or hiding and then showing with a short delay works (though it flashes). #Sari's solution for changing the scroll properties works and does not cause any visible redraw.
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
Note that I haven't tested this fix beyond my iPad 3 other than to ensure that it doesn't cause script errors in Chrome or IE 7/8/9.
In case this is of any use...Incorporating PhoneGap I was using Zepto to append ajax-loaded, scrollable content into the dom. I was then applying a css transition on it. There were no iFrames on the page.
I was experiencing the same issue as mentioned here, where scrolling would just stop working. When I copied the generated code into a separate file and tried that on the iOS simulator - everything worked as expected.
I eventually got it to work by querying the height of the parent container - just before the css transition. By adding var whatever = $('#container').height(); the scrolling worked.
To improve a little bit ThinkingStiff's excelent answer, you can avoid blinking
- if overflow:hidden is set
- if instead of 'auto' value just remove property:
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);