The problem is that I have a body (which it can't be positioned fixed because it causing bugs to the current project) with a lot of content and a modal with scrollable content inside, the problem is that on iOS if I turn the overflow to hidden nothing happens.
In my case, setting height: 100vh and overflow: hidden to class="parent" is not working.
I tried different things and tried different hacks to solve this issue but nothing fixed yet I saw here also different methods but for different situations.
I looked also for overflow hidden alternatives but nothing found yet...
If you guys have some ideas/refs/a way to solve it post it here I appreciate, thank you.
Here is the snippet https://codepen.io/anon/pen/zJQoJR
<body class="modal-open">
<div class="parent">
<p>Body scrollable content</p>
<div class="container-child">
<div class="child">
<p>Modal scrollable content</p>
</div>
</div>
</div>
</body>
Putting the overflow hidden on your html tag might help:
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
I got pretty good results by adding this to your css:
body.modal-open > .parent {
position: fixed;
overflow: hidden;
height: 100%;
}
And to make the modal 'bouncy' on your iOS device, change your .container-child css to:
.container-child {
position: fixed;
background-color: rgba(0,0,0,0.4);
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; /* <-- added */
}
Here's a demo on codepen: https://codepen.io/anon/pen/mzJXPJ
Related
Inside a position: fixed; element, scrolling elements will "lock" if you try to scroll them the wrong way at the start of a touch.
Example: touch the screen and drag downwards, then back up. The element won't scroll. If you release, wait a few seconds, then try dragging upwards, it will scroll.
http://12me21.github.io/scroll-test.html
body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroll-container {
overflow-y: scroll;
height: 100%;
}
#scroller {
height: 200vh;
font-size: 50px;
}
<body>
<div id=scroll-container>
<div id=scroller>Test<br>more text</div>
</div>
</body>
This answer: https://stackoverflow.com/a/51733026/6232794 seems to be the same problem I'm having, but the fix no longer works. It seems to happen inside all fixed elements and isn't caused by -webkit-overflow-scrolling: touch; anymore.
Is there any way to fix this now? Or do I just need to avoid position: fixed; entirely?
Adding overflow: hidden; to <html> or <body> seems to fix it.
I'm not sure why this works, but I assume the problem is that safari is trying to scroll html/body instead of the element you want.
Because the scrollable section is inside a position:fixed element, scrolling the body has no visual effect, so it looks like nothing is happening.
I had a same problem and overflow hidden help to stop scrolling body element, but it also disable scrolling webpage if visitor wants to. So I created JQ solution to add class .overflow-hidden to body element, only when I need it. In my case when sidebars has active class.
$(document).click(function(){
if ($(".siderbar_menu").hasClass("side-menu-active")) {
$("body").addClass("overflow-hidden-mobile");
} else {
$("body").removeClass("overflow-hidden-mobile");
};
});
Works for me.
Running into an odd issue in Safari/iOS. I have the following code.
HTML:
<div class="content">
<p>Hello World</p>
<div class="footer">
<p>This is the footer</p>
</div>
</div>
CSS:
.content {
border: 1px solid orange;
overflow-x: hidden;
position: relative;
z-index: 0;
}
.footer {
background: pink;
width: 100%;
position: fixed;
bottom: 0;
}
Working example:
http://run.plnkr.co/ZgGFJgMf0atvbiyC/
The scenario:
I have a footer div positioned to the bottom of the viewport with position: fixed. This is child element of a wrapper div for the entire page content.
The problem:
The above works just fine in Chrome. In Safari (and iOS), however, notice that the footer can't be seen. It's there...but the parent div isn't as tall as the viewport, so the footer can't be seen.
Removing any one of the following from the .content div fixes things: overflow-x, position, z-index.
Why?
For this example, the easy fix, of course, is to simply remove of of those attributes, but the issue is that I'm debugging an existing site with about a 1000 lines of HTML and 30k+ lines of CSS. Yes, a bit of a mess. But it's what I have. I'm a bit hesitant to just remove one of those styles without first understanding the issue fully.
I have a div I want to extend to the bottom of the page. The standard approach for this seems to be to set the min-height to 100% for the div you want, the body, and the html. I have done this, however, browsers (tested on both firefox and mobile safari) don't seem to care. Simplified code:
<html>
<head>
<style>
html{
min-height: 100%;
position: relative;
}
body {
min-height: 100%;
position: relative;
}
#main {
min-height: 100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id='main'>
<p>content</p>
</div>
</body>
</html>
A closer inspection with firebug reveals that it reads the css is read, and says that it computed a height of 986px for html and body elements (on a 1080p monitor), but only 517px for the div. What's really weird though is that the layout tab seems to indicate the height of the body element is only 517px, even though it computed it should be 986px.
So the browser knows what the height should be, but refuses to actually set it. What the actual ...
EDIT: I came across a similar question, which was answered with the suggestion one uses vh instead of percentages. This worked for the body and html tags, but when used on the div it makes it longer than the page because there's actually a header above the div. So I'd use percentages, but they result in the same issue I had with body originally: it's read, computed, but not executed.
The code in the first comment did the trick. I have no idea how, but it works now. Leaving the code here for future reference:
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow:
column nowrap;
}
#main {
flex: 1;
}
Thanks, Anton Strogonoff!
Please try this code may be it's help you.
<div id=fullheight>
Lorem Ipsum
</div>
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
I've run into a very annoying issue only on iOS Safari 9+ (8.4 is fine) where, once the user quickly scrolls a page resulting in anchor links within fixed elements no longer being clickable due to the appearance and actual click/hit area not lining up with its element until the user scrolls again.
It doesn't happen the same way every time, and can take a few tries to "break" the system. Content must be longer than the viewport for this to work.
No workarounds to the problem yet. How can I solve this issue?
UPDATE: After further testing, the issue only happens with iOS Safari 9 and above, tested on iOS 8 and there is no problem.
UPDATE 2: It's now clear that this happens on most websites using position:fixed; and even position:-webkit-sticky;. You may want to check yours :)
HTML
<section>
<article></article>
<article></article>
<article></article>
</section>
<div class="sticky">
</div>
CSS:
html, body {
margin:0;
}
article {
display: block;
height: 200px;
width: 100%;
margin-bottom: 20px;
background: whitesmoke;
}
.sticky {
width:100%;
height:100px;
position: fixed;
bottom:0;
background: orange;
text-align:center;
}
.sticky a {
display: inline-block;
width: 100px;
height: 100px;
background: yellow;
}
http://codepen.io/toobulo/pen/dGEodo
The issue doesn't happen within Codepen editor, as it's related to mobile Safari's elastic / toolbar size changes. Please export code into own page, or use the following link:
https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html
This problem is related to the bounce effect in ios and losing the toolbar & the header bar. The only way that i have found to fix this is to do the following:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: auto
}
You could do it on a breakpoint as well so it only works for mobile. Hope this helps.
** Added the overflow scrolling.
I found that andy jones's answer effectively fixed this problem for me, but it had an unwelcome side effect: momentum scrolling no longer worked. This made scrolling down long pages on an iPad take forever.
Combining andy's answer with this tidbit from CSS tricks made my links clickable while also allowing for momentum scrolling:
html,
body {
height: 100%;
overflow-y: scroll; /* must be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I also found that the width: 100% style from andy's answer was unnecessary, so I removed that as well.
You can make .sticky a link absolute and apply following CSS so the link will be independent to the window/browser.
.sticky {
width: 50px;
}
.sticky a {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
body {
overflow: auto;
}
#container {
min-width: 960px;
zoom: 1; /*For ie6*/
position: relative; /*For ie6/7*/
overflow: hidden;
margin: 0 auto;
}
#main {
background: #cea;
width: 960px;
margin: 0 auto;
height: 700px;
position: relative;
top: 0;
}
#right,
#left {
position: absolute;
height: 100px;
width: 100px;
top: 0;
z-index: 100;
}
#right {
background: #797;
right: -100px;
}
#left {
background: #590;
left: -100px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>
Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.
So use what you have now with this adjustment:
html, body {
height: 100%;
width: 100%;
margin: 0;
*overflow-x: hidden;
}
body { text-align: center; overflow-x: hidden; }
Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.
I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.
#boxescontainer {
position: relative;
max-width: 1100px;
min-width: 980px;
}
#boxes {
max-width: 1100px;
min-width: 900px;
height: 142px;
background:url(../grfx/square.png) no-repeat;
background-position: center;
z-index: 100;
}
I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.
On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.
In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.
Your body is not set to relative.
Not knowing what you'd like to do with this, I would perhaps set a background image on the body instead.
You're getting a scrollbar only when the viewport's thinner than the main plus that right box, right? (Don't think that was clear to some people.) This is expected browser behavior for content overflow.
Depending on what you want to happen (why do you want it to disappear in this circumstance, if you do?), you could set overflow:hidden on .wrapper. That would always hide it--if you're looking to dynamically display it on some other event, that'll work.
If I'm not mistaken, though, you just don't want it to show when their viewport's only 960px wide. AFAIR you can't do that without some js/jQuery. My suggestion would actually be--especially if you don't want to mess with javascript--if you want this content to be visible at all, accept the scrollbar at narrow widths. It might irk you as a designer, but most people won't notice it, and those who do can still access your content--which is a win, right?
Wrap all the elements in a div, make that div position relative and overflow hidden. It solves this problem every time. :D
If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.
Try this:
<html dir="rtl">...</html>
This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.
You can do the same with direction:rtl css property.
If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.
Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.
#bodyInner {
width: 100%;
min-width: 960px;
overflow: hidden;
width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
I needed a solution like this too - thanks to all who suggested the 100%-wide wrapper with overlow-x hidden. However, I don't think you have to add the extra #bodyInner div - I've successfully tested it applying the width and overflow attributes directly to body in Safari, Opera, Firefox, Chrome, and IE8.
I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.
Create wrapper (#bodyInner) around everything inside your <body> tag.
Apply this CSS rule:
#bodyInner {
width:100%;
overflow:hidden;
min-width:960px;
}
Too bad you can't just apply this on the <body> element.