CSS - Unusual extra width

Question

I was making a css animation when I noticed that the width was more than any element (even html or body)

the width disappears as soon as I open up chrome dev tools, so refresh the page after opening the dev tools to see the width again

fiddle

---

HTML

<h1>bounce<h1>

CSS

h1 {
    font-family: monospace, sans-serif;
    font-size: 70px;
    font-weight: normal;
    text-align: center;
    animation: bounceIn .5s .5s linear 1 normal both;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(4); }
    30% { opacity: 1; }
    60% { transform: scale(.7); }
    80% { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

Answer 1

This is because the original width of the header is very large, and chrome doesn't seem to update the calculated width at the end of the animation (it does update correctly on safari, and may be a bug in chrome). When you resize the window (which opening dev tools will do), chrome then calculates it correctly.

To fix it though, and to also stop the scroll bars appearing at the beginning of the animation on all browsers, have a look at this edited JSFiddle

Basically, I've wrapped the header into a div, and set overflow hidden on the div:

<div class="bounce-container">
    <h1>bounce</h1>
</div>

.bounce-container {
    overflow: hidden;
}

Answer 2

Hi These types of unusual extra space I faced in iphone 5 with ios version 6

There we used

body
 {
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  min-width:100%;
}

Even overflow-x will do the work but try with that and for safety add width properties.