Issue with CSS Media Queries(Scrollbar)

issue with CSS media queries(scrollbar)

Firefox & Webkit based browsers render the scrollbar differently. In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width. So, that's why the floated DIVs are collapsed in Firefox.

I did some stuff with css may be that's help you. (check this fiddle)

        html {
            /* force scrollbars */
            height: 101%;
        }
        body {
            margin: 0; 
            padding:0; 
            white-space:nowrap; 
        }  
        #box1,
        #box2 {
            display:inline-block;
            width: 400px;
            height: 200px;  
            vertical-align:top;
            white-space:normal;
        }
        #box1 {
            background: #ce0000;
             margin-right:-5px;
        }
        #box2 {
            background: #8e0000;
        }

        @media screen and (max-width: 799px) { 
            body { 
                white-space:normal; 
            }
            #box1,
            #box2 {
                width: 300px;
            }
        }

Horizontal Scroll Bar Issue w/ media queries

Here's the problem:

#main span.bold {
    padding: 15px 20px;
    ...
}
#main span{
    width: 100%;
    ...
}

This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.

To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:

<span><strong>What have we done?</strong></span>

CSS Media Queries and Firefox's Scrollbar Width

If you are just using media queries, then the offset from the sidebar won't make any difference between browsers.

If you are trying to use jQuery with a media query however, you may run into some small problems as the widths returned in jQuery are consistent, and the offset will then show.

To fix this you simply need to calculate the offset of the sidebar in firefox browsers and subtract that from whatever point you wanted to syncronize at. i.e.

var scrollBarWidth = 0;
if ($.browser.mozilla)
  scrollBarWidth = window.innerWidth - jQuery("body").width();

Then later on when you specify the synchronization...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) {
  //act to do along with the media query
}

Hope this was helpful

CSS Media query not showing/hiding scrollbar

Either put your @media rules last in the order or make them more specific. E.g. either this:

body {
        overflow: hidden;
    }

@media all and (max-width: 500px) {
    body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    body{
        overflow-y: visible;    
    }
}

or this

@media all and (max-width: 500px) {
    html body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    html body{
        overflow-y: visible;    
    }
}

body {
    overflow: hidden;
}

Media query layout issue with scroll bar in chrome

I think Chrome enters into infinite loop here. After you go just a tad below 500px he removes vertical scrollbar, but right after he removes scrollbar window width is back above 500px and he applies CSS for that width which in turn again needs vertical scrollbar and we are again at the same place where we started... so infinite loop.
Basically Chrome just protects itself from infinite loop by leaving the space that the vertical scrollbar was using.

As far as I can see you can either remove the scrollbar completely i.e. overflow:hidden on body (but I guess that's not much help for 99% of websites), or leave it on at all times on body with overflow-y:scroll.

EDIT:
Maybe you could try removing scrollbar on body tag, but encapsulate all content in one div with overflow-y:scroll. Even though div is as wide as body, it seems to work this way, no glitches in my test. This would require setting up this div to be 100% height of the screen which could be though.

---

Related Topics