title: Scrollbars appear without content overflow
body: <p>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.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="robots" content="nofollow"&gt;
  &lt;title&gt;Resident Manager Portal&lt;/title&gt;
  &lt;link rel="shortcut icon" href="resources/icons/favicon.ico"&gt;
  &lt;style type="text/css"&gt;
  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 &gt; * {
  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 &gt; :nth-child(1) {
  -webkit-animation-delay: 0s;
  }
  #appLoadingIndicator &gt; :nth-child(2) {
  -webkit-animation-delay: 0.5s;
  }
  #appLoadingIndicator &gt; :nth-child(3) {
  -webkit-animation-delay: 1s;
  }
  @-webkit-keyframes appLoadingIndicator{
  20% {
  opacity: 0
  }
  50% {
  opacity: 1
  }
  80% {
  opacity: 0
  }
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="appLoadingIndicator"&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can add <code>overflow-x: hidden;</code> and <code>overflow-y: hidden;</code> to hide the bars, but I don't see anywhere the content is overflowing. Any suggestions?</p>