Scrollbars disabled in my HTML/CSS? while using Progid Microsoft gradient. - html

NOTE: Please see the bottom of question for update!
Here is an extract (sample) of my HTML/CSS:
html { height: 100%; }
body
{
height: 100%;
margin: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699CC', endColorstr='#1C3854');
}
.container
{
display: inline-block;
width: 50%;
}
.box
{
width: 80%;
margin-left: auto;
margin-right: auto;
}
and
<body>
<div class="container">
<div class="box">
<!-- content 1 -->
</div>
</div><div class="container">
<div class="box">
<!-- content 2 -->
</div>
</div>
</body>
This page only needs to work in IE8+ (since it is running on SOE).
When the browser is maximised and/or there is very little content, there are no scrollbars, as expected.
When the browser is small and/or there is lots of content, there are scroll bars however they are greyed out. The user is unable to scroll to stuff off the edge of the visible region.
I have tried specifying an overflow property on HTML and body but it still only gives greyed-out scroll bars.
Commenting out the height: 100% for html/body seems to fix vertical scrolling but not horizontal - however it breaks my gradient.
What am I doing wrong?
UPDATE: I was trying to put together a sample with lorem-ipsum content to show the problem for jQuerybeast, and I found that scroll was suddenly working: I was initially confused but then realised I hadn't included the background gradient (filter:progid......). As soon as I added the gradient, scroll stopped working. Why is this gradient breaking scroll?

Unfortunately there is no good solution around it.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, scrolls etc.) are buggy. - Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
You can consider to use a gradient background image and repeat it accordingly.

The solution I found was to set the overflow after some event, something like this:
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); }
$('html, body').animate({scrollTop:$('#mydivid').position().top}, 'fast').css('overflow', 'auto');

Related

Blank space at bottom of page outside the html tags on mobile after giving a width that exceeds 100% to an element

Honestly believing I must be the first to encounter this problem after
searching the web for quite a bit, I decided to present this issue to
you.
The issue
The issue I am facing resembles a "blank space" that lives at the bottom of my page. It's only visible on mobile and I haven't been able to replicate the issue on desktop, however going into developer modus on chrome and visiting my website, I can see the problem.
When using the developer mode in chrome and checking all the elements, it becomes apparent that the "blank space" is nothing. It holds no information and it doesn't seem tied to any element.
However, after some digging it was found it the "blank space" only pops up after giving width to an element. And not just a width, but a width that exceeds the view-port.
Something else that caught my attention is that the height of this "blank space" is the same as the view-port height.
What am I trying to accomplish
You might wonder why I am setting a width exceeding the view-port, my reasoning for this is because I am trying to build a mobile(only) website that uses horizontal scrolling as a way to paginate between different content.
My goal is to accomplish this solely using css3 and html, no jQuery, no JavaScript and preferably not any ready-made plugins.
So far the "horizontal scroll" gives me the desired effect apart from the massive amount of white space it gives on the bottom of my page. I'd like to invest my time into trying to "fix" it rather than replacing it.
Recreating the issue
The easiest way to re-create my issue is to start off with a blank html file and give it the following elements:
<div id="wrapper"> ... </div>
And inside the wrapper put:
<div class="content"></div>
<div class="content"></div>
Then in your css file put the following styles:
body {
margin: 0; padding: 0;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
}
And don't forget to include a meta tag in the <head></head> for the view-port:
<meta name="viewport" content="width=device-width, initial-scale=1">
For a live example, please check my JSFiddle.
Edit:
Adding some screenshots of my chrome developer tool to visualize the issue.
See here the actual website content, as you can see all is like intended.
The width is 200vw and height is 100vw.
See here the issue captured as a "blank space" like described in the OP.
Notice that the blank space stretched to twice the height of the height: 100vh as set in the css styling. Width stretched as far as the content, width: 200vw.
Chrome developer tools screen-size in device modus (CTRL - SHIFT - M) is 360x640 (width x height).
The issue is when there is a width > 100vw so a horizontal scroll bar appear and take a height from the page height so a new vertical scroll bar appear and affect the height of the page
Here is the issue
So the solution is to give body a width of 100% then overflow-x:hidden
and then it become
Edit
and here a new screenshot with device dev tools enabled
body{
margin: 0;
padding: 0;
display: block;
width: 100%;
overflow-x: hidden;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
background-color:#eee;
}
<div id="wrapper">
<div class="content"></div>
<div class="content"></div>
</div>
and updated FIDDLE
Have you tried:
body {
margin: 0;
padding: 0;
height:100vh;
overflow-y:none;
}
Your code works great when I tried it out:
http://codepen.io/staypuftman/pen/qZZxRG. Toggle the background elements and you'll see it works just as you want.
The only difference is that I used normalize.css behind the code. Perhaps this gets a code gremlin you might have missed. Normalize is a great way to get rid of some HTML oddities and it's very light weight.

overflow-x doesn't work on Safari after rotation

I am building a site where I need a certain div to be horizontal scrollable when overflown if the content is bigger than the screen. Okay, so this is easy - and it works on all browser but it doesnt work perfectly on Safari:
Scenario: Load page in potrait on iPad or iPhone. Content in the scrollable div is bigger than the screen. The scroll works fine. Now I rotate the screen to landscape and the content is now smaller than the screen and therefore there is no scrollbar. I rotate back to potrait, the scrollbar appears, but the scroll doesn't work. If I then refresh the page the scroll works again.
Duplication of the issue:
The scenario can be duplicated with this fiddle: http://jsfiddle.net/v7wvbupd/2/. If you go to this fiddle with an Android product it works perfectly with each rotation. If you do the same with an Apple product you will encounter the bug.
The scroll - with rotations - works fine on all other mobile browsers than Safari.
I have been trying out several things from other posts and other sites but with no success.
What I tried and didn't work:
Setting the postion of body to relativ.
Adding the following: html, body {overflow-x: hidden;}.
Use: -webkit-overflow-scrolling:touch; on the scrollable div.
Adding !important to -webkit-overflow-scrolling:touch; and overflow-x: auto to keep it from being overritten when rotatet.
I have also been looking into some js fixes like adding a timeout on the attribute but still with no results:
<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>
Most of the posts that I have come across are issues where the scroll doesn't work at all. In my situation it works until I rotate from landscape to potrait.
My structure (simplified):
<html>
<body>
<div id="header" class="col-md-12"></div>
<div class="scrollableDiv">
<div id="footer" class="col-md-12"></div>
</body>
</html>
My current CSS:
html {
overflow-y: scroll;
height: 100%;
width:100%;
}
body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}
.col-md-12{
width: 100%;
}
EDIT
My site is using Angularjs as a part of the solution. I just tested if wrapping it within some js was the problem but this had nothing to do with it either. It seems to be a common problem with the Safari only?
I had this troubles with Safari by the past.
So simple things like overflow could become complicated ones.
I suggest you use iScroll.
Definetely the right solution for such a case.
http://cubiq.org/iscroll-5

How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS

I'm trying to add a box on a web page that stays on screen at all times. The HTML looks like this:
<div class="mySideBar"> <!-- Some text and other elements --> </div>
The styles being applied look like this:
.mySideBar { position: fixed; width: 20%; height: 80%; overflow-y: scroll; }
That works nicely until I re-size my window then the down button on the scroll bar disappears offscreen and underneath my footer. The Footer HTML looks like this:
<div class="myFooter"> <!-- Some text and other elements --> </div>
The CSS looks like this:
.myFooter { position: fixed; width: 100%; height: 24px; overflow-y: scroll; }
I've tried playing with position relative and a few other things but I can't seem to get it right. It needs to work in IE7 too unfortunately and I'm afraid I can only post obfuscated snippets that display my problem. Is there something I've obviously missed?
I found an answer myself after I went away and came back to it today. Sorry I didn't get back to those that left comments but I couldn't get online. If you use bottom with a value set to 24px, the height of the footer, the overflow scroll bar will stay put.

Preventing horizontal scrolling after a certain width

I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.

Can a large div not trigger browser scroll bars?

I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>