CODEWITHSUNDEEP
htmlcss
Stephen Cluff
Stephen Cluff

Reputation: 275

Scrollbars appear without content overflow

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?

Upvotes: 1

Views: 94

Answers (1)

middleinitial
middleinitial

Reputation: 659

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;
}

Upvotes: 3

Related Questions