Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.
Related
I've been probably overthinking this and trying out too many things incorrectly..
http://testserver.glow-berlin.de/kurzfilmwettbewerb
this is the website we're talking about.
At the bottom (right above the footer) you find an image that is supposed to stick to the bottom of the pink box.
Whenever I check it on mobile, the image offsets outside of the box. I built the section using the grid system but struggled with it, so I removed it for mobile... I just couldn't figure out the problem. Now – without the grid system – the same problem appears. On Android it seems to work fine but on iOS the image jumps out of the box again. When I fix it for iOS the problem appears on Android.
Any help with this?
The background-attachment: fixed; style on your div with the ID #gutfilmer is the problem on iOS.
'background-attachment: fixed has been disabled on iOs since it costs a lot on mobile browsers.
If you remove it the filmflap stays on the pink background.
try
#gutfilmer {
overflow:hidden;
}
I have a page with a semi-transparent sidebar with position: fixed; overlaying the rest of the page. The page has a scrollbar, but when the cursor is above the sidebar, the scrollwheel wont work.
When I was looking up this issue, I came across examples in which it just seems to work with no additional effort, like in this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2. But I just can't find why it doesn't work in my case.
Here's my code:
https://jsfiddle.net/c90zo62s/4/
(made it into a fiddle because stackoverflow kept refusing the snippet, while it was totally fine in the preview)
So when hovering the yellow area, I still want the Lorem ipsum bit to scroll, but it doesn't.
PS: I don't want to use pointer-events: none; as it has too many side-effects that are unwanted in this scenario
I finally found a fix.
The scrolling content was in a div with overflow: auto;. This div did actually cover the whole screen and was thus behind the fixed sidebar. I now removed this div and made the <body> the element that scrolls. Appearently that was all it took.
But then I still don't fully understand why an underlying div can't be scrolled through a fixed element, while the body can...
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.
Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.
EDIT:
In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.
I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?
There is no reliable cross-browser way to do what you're looking for.
Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).
If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.
Native scrollbar styling is limited, but here is a demo of how to do it:
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
http://codepen.io/zakkain/pen/phjBC
Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.
If you want firefox, you'll have to go with a custom scrollbar replacer.
And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present
It works well, but most code pens can't show it, so you'll have to experiment on your own.
This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?
As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept #DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.
I found a strange bug in Firefox. I've tested it in Chrome too, but didn't happened..
I'm using a background object. It's a div with fixed position and 1920*1050 sized. I need this, because I want my site compatible with every resolutions. Smaller resolution hide the big part of the background, but full HD users can see the whole background.
If I use absolute position for this div, my browser give me horizontal scrolling ability. I can hide it with hidden overflow, but I can't disable the scrolling ability. With fixed position the browsers doesn't "see" the whole object, and it's equal to disabled horizontal scrolling.
If anybody have any other solutions I would be very grateful for it.
The problem with this solution, is this:
You can see the difference between the two. It's the same text styling, but no anti-aliasing on fixed one. With smaller font-size it's really annoying.
Anybody met this bug in the past? How could I fix it, or any other solution for background image?
Update
Okay, I deleted the div, and added background for my body tag, with fixed attribute, and happens the same...
background-attachment: fixed; < Causes the same problem
Not quite sure what your background is supposed to be doing. But if you need a proportionally scaling background that fits all browser window sizes, you can use thisplugin and a reasonably high resolution JPG with preload on.
Remove any box-shadow property from the parent element. This worked for me.