Scrollbars appear without content overflow

Question

I have a simple CSS loading indicator for a basic web app that uses Webkit radial gradients and animation. However, during the loading process, both the horizontal and vertical scrollbars appear.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="nofollow">
<title>Resident Manager Portal</title>
<link rel="shortcut icon" href="resources/icons/favicon.ico">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
background-image: -webkit-radial-gradient(center, ellipse contain, #00AED9 0%, #0075B0 100%)
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
width: 100%;
height: 30px;
text-align: center
}
#appLoadingIndicator > * {
display: inline-block;
width: 30px;
height: 30px;
background-color: #FFFFFF;
opacity: 0;
-webkit-border-radius: 10px;
margin: 0 5px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
#appLoadingIndicator > :nth-child(1) {
-webkit-animation-delay: 0s;
}
#appLoadingIndicator > :nth-child(2) {
-webkit-animation-delay: 0.5s;
}
#appLoadingIndicator > :nth-child(3) {
-webkit-animation-delay: 1s;
}
@-webkit-keyframes appLoadingIndicator{
20% {
opacity: 0
}
50% {
opacity: 1
}
80% {
opacity: 0
}
}
</style>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

I can add overflow-x: hidden; and overflow-y: hidden; to hide the bars, but I don't see anywhere the content is overflowing. Any suggestions?

Always use a CSS reset.

khollenbeck
– khollenbeck

2013-03-28 18:26:23 +00:00
Commented Mar 28, 2013 at 18:26 — khollenbeck
– khollenbeck, Commented Mar 28, 2013 at 18:26
A jsFiddle would be nice.

starbeamrainbowlabs
– starbeamrainbowlabs

2013-03-28 18:28:53 +00:00
Commented Mar 28, 2013 at 18:28 — starbeamrainbowlabs
– starbeamrainbowlabs, Commented Mar 28, 2013 at 18:28

middleinitial · Accepted Answer · 2013-03-28 18:23:09Z

3

The width and height of the page is 100% + the standard margin so it's overflowing. Try removing the margin with:

html, body {
   margin:0;
}

answered Mar 28, 2013 at 18:23

middleinitial

6593 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scrollbars appear without content overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related