I came across with a weird thing lately with overflow: hidden;. I set it to an element, and then I want to transform the elements in it with translate(), when it translates in negative direction it will be hidden, but if I translate in the positive direction, it won't be hidden. In desktop browsers it's not really showing, but you can reach it with a little bit of mouse work. And on mobile it's just scrolls, so that is the worst.
Here is an example showing it: http://cssizer.com/KLHlPShW
So I've been working with something similar all day and realized that while I had
html, body {overflow:hidden; }
...if I add position:absolute, position:relative or position:fixed to the html and body, it fixes the issue.
I wrap everything in a container div with the following code. Explicitly set overflow appropriately in both directions. This keeps the X-axis from scrolling in iOS Safari, even if there are elements translated to the right of the main content area.
But scrolling performance is significantly degraded unless you add -webkit-overflow-scrolling: touch;. It took me a long time to find this! Hopefully it helps someone else.
.scrollContainer {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
I had the exact same problem, and here is how I fixed it:
HTML
<div id="container"> <!-- defines "boundaries" of content -->
<div id="content"> <!-- part of it must be hidden -->
</div>
</div>
CSS
#container {
overflow: hidden;
z-index: 2;
}
#content {
/* Translation code ...*/
z-index: 1;
}
Here is a JSFiddle.
Sadly the above solutions didn't work for me.
In my case it did respect overflow: hidden when used on html.
So for those people with the problem of translate extending the viewport:
html {
overflow-x: hidden;
}
Related
Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.
Given the simplest of fixed sidebars, something like:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
And a relatively long page, with input elements.
When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).
So the Question..
Is there any way to leave fixed elements as fixed even when input elements are focused?
I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
In order to achieve the effect you desire you need to change your approach to the layout. Instead of positioning the sidebar with position:fixed you need to use position:absolute within a position:relative container that is set to the height of the viewport within that position:relative container you need another div that uses overflow-y: scroll and -webkit-overflow-scrolling : touch
Caveat: I generally avoid using position fixed on tablet & mobile if possible although the browser support is there, in my experience it'll be janky and javascript solutions leave a lot to be desired, my first response would be to challenge the pattern with the designer. If I'm given designs that include a position fixed element when there are input elements, I'm more likely to seek a design solution than a development one as the focus issues you're describing are difficult to circumvent and maintain a quality user experience.
THE MARKUP:
<div class="outer">
<div class="sidebar">
<ul>
<li>Dummy list nav or something</li>
</ul>
</div>
<div class="container">
<input type="text" />
<!-- I added 10000 inputs here as a demo -->
</div>
</div>
THE CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
position: relative;
overflow: hidden;
/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
height: 100vh;
}
.sidebar {
position: absolute;
top: 10px;
right: 10px;
/*added bg colour for demo */
background: blue;
}
.container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
input {
display: block;
}
Here's a CodePen for you to open in your simulator (presentation view):
https://codepen.io/NeilWkz/full/WxqqXj/
Here's the editor view for the code:
https://codepen.io/NeilWkz/pen/WxqqXj
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
I use this code on my test page to clear header-container float, but doesn't work. Can I force it somehow?
#header-container{
position: relative !important;
clear: both !important;
overflow: auto !important;
}
Use this approach:
#header-container:after {
content: ' ';
line-height: 0;
display: block;
clear: both;
*zoom: 1; /* trigger hasLayout for IE 6/7*/
}
I also suggest to take a look at talented Nicolas Gallagher's Micro clearfix
Update:
Per the OP's explanations, (at the comments below):
That header-container floats on top and stays there when i scroll and
i don't want that.
That is not a clearing fix issue, None of #header-container's children are floated.
The point is the .viewitem-panel and .viewitem-inner elements are positioned to stay at the bottom of the page, right under the header, and .viewitem-inner has a overflow-y: scroll; CSS declaration to scroll the content.
So, This problem can not be resolved unless the layout is changed.
place clear in a separate class
.clearfloat{clear: both}
and then place it after the div you wanna clear float
<div id="header-container">
</div>
<div class="clearfloat"> </div>
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I'm having trouble with a large image on my page, I can't seem to avoid it causing a scroll on certain browsers. So far I can only see it on Safari, but my friend apparently also see's it on Chrome.
All I'm doing, is positioning an image inside its container absolutely, and then moving it right, so that it actually outside of the container and wrapper. The problem is, that its quite a large image, so in some browsers you are able to scroll to the right revealing the rest of the image. Here's the code.
<html>
<head>
<style>
body{
background: aqua;
margin: 0;
overflow-x: hidden;
}
#wrapper{
background: #fff;
width: 960px;
height: 100%;
margin: 0 auto;
}
#content{
width: 960px;
height: 500px;
background: yellow;
position: relative;
}
#image{
position: absolute;
bottom: 0;
right: -320px;
z-index: 0;
width: 1210px;
height: 468px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="image"></div>
</div>
</div>
</body>
</html>
and heres a fiddle that deomonstrates it: http://jsfiddle.net/alsweeet/5mqHf/
Adding the overflow-x: hidden to the body style seems to solve the problem in most browsers, but not safari. You will see that I have not added this yet into the fiddle demo, and once you add it, you won't be able to scroll left or right anymore, which is the effect I'm trying to achieve cross browser.
I would sure appreciate some advice on this one. I'm sure there's probably a better way of doing this than absolutely positioning it.
Thanks!
Alsweeet
edit: problem IS occurring on Chrome also, the scroll bar is hidden, but you are still able to scroll sideways. Still works fine in Fire fox though.
edit: heres a screen shot to help explain what i'm trying to achieve without any side scroll. The red box is the box which is causing the side scroll. You can see that the red box is outside of the 960 wrapper.
this is what you are looking for?
DEMO
http://jsfiddle.net/5mqHf/4/
overflow-x: is not fully cross browser compatible, try using overflow:hidden;, as long as you don't need to scroll vertical on the element then that will never cause you an issue.
A workaround to have overflow-y on an element and restrict the overflow-x on another element is this fiddle.
http://jsfiddle.net/5mqHf/7/ - Fix for image position
A consideration for this is that if you are going to scroll vertically, when looking at the width of the image element, you need to account for the wdtih of a scrollbar to avoid a horizontal scroll bar, this usually varies between 15px and 30px depending on the browser.
Please have a look. Is it matching your requirements. if no please let me know so I can try something more.
DEMO
http://jsfiddle.net/saorabhkr/FyJ4F/