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/
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
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 going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.
What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.
It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):
<div id="container">
<div id="background">
Content
</div>
<div id="absolutediv">
Absolute stays inside
</div>
<div id="fixeddiv">
Fixed escapes!
</div>
<div id="absolutediv2">
Stays put!
</div>
</div>
The relevant CSS:
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#absolutediv {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
#fixeddiv {
position: fixed;
top: 100px;
width: 300px;
background-color: #ECC;
}
#absolutediv2 {
position: absolute;
width: 300px;
top: 120px;
background-color: #ECC;
}
And JavaScript that will hold #absolutediv2 in place:
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');
container.addEventListener('scroll', function() {
div.style.top = container.scrollTop + 120 + 'px';
});
So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.
Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?
(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)
Edit:
To sum up, I want a div that:
Scrolls horizontally with its container
Stays put when its container scrolls vertically
Looks like it belongs to its container
Looks nice on a mobile browser
The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.
Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui
Ok, I haven't tested this but it should be along the right track. Basically this gives you the ability to create multiple "Sticker" items with the HTML5 data attribute I created for you data-special="sticker". The jQuery looks for these, then copies the data and appends it to another <div> element that is positioned where the original was, then it hides the original.
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
I want to stay put!
</div>
</div>
</div>
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});
Let me know how it works for you, also one downside to this is once the original element is hidden, the space it used to take up is then collapsed... I'll try to brainstorm a solution for that.
Edit:
Changed the JS to get the #container width instead of the original element width as the original element is larger that the container.
Edit:
Tested: jsfiddle
Some issues would be that the element will then also overlap the scroll bar, if you knew the width of that you could then subtract if from the value.
Also check the updated code above. There were some errors...
You might want to have a look at the following post:
How can I make a div stick to the top of the screen once it's been scrolled to?
As explained in this answer:
A script-free alternative is position: sticky, which is
supported in Chrome, Firefox, and Safari. See the article on
HTML5Rocks
and demo, and
Mozilla
docs.
As of today, the demo linked works for me in Firefox but not in Chrome.
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;
}
I have a fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}