CODEWITHSUNDEEP
htmlcss
MG1
MG1

Reputation: 1687

Overflow:hidden in Chrome doesn't work

I've read all the suggestions about how to fix this, but my site is still allowing users to scroll horizontally no matter what I do. I've gotten the horizontal scrollbar to be hidden, but using arrow keys or the mouse wheel still lets users scroll. I've tried to assign overflow:hidden on individual elements and on html. Nothing seems to work.

HTML:

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
        <div id="shapes">
                <div id="design-shape"></div>   
                <div id="contact-shape"></div>  

       </div>   
</body>

CSS:

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
position: relative;
vertical-align: baseline;
overflow-x: hidden;
}

#design-shape {
 background: none repeat scroll 0 0 #e98e82;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 1040px;
 top: 1200px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 6;
}

#contact-shape {
 background: none repeat scroll 0 0 #333333;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 800px;
 top: 1960px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 17;
 }

Upvotes: 0

Views: 1722

Answers (2)

Kelderic
Kelderic

Reputation: 6687

What's Going On

In Chrome, you can scroll sideways, which shows things that you don't want shown. This is despite not having a horizontal scrollbar.

The reason is that the shapes that extend over to the side are absolutely positioned, and their parent #shapes is not positioned relatively or absolutely, so it can't catch them. To fix this, we need to absolutely position #shapes, and set position:relative to #shapes's parent, #page Add a few fiddly bits to ensure that everything is positioned correctly and we are good to go.

Code

CSS:

#page {
    position:relative;
}

#shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Upvotes: 1

Howli
Howli

Reputation: 12469

There is two classes (shown below) that have a width: 5000px; and a margin-left: -2500px. Removing/changing that should fix the problem for you. 

#design-shape {
 background: none repeat scroll 0 0 #e98e82;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 1040px;
 top: 1200px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
     z-index: 6;
 }

 #contact-shape {
 background: none repeat scroll 0 0 #333333;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 800px;
 top: 1960px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 17;
 }

EDIT:

Adding position: relative; to the shapes style should work.

#shapes {
overflow-x: hidden;
position: relative;
}

Upvotes: 1

Related Questions