Databases
StackOverflow2013
Postsdbo
POFixed position lost with overflow hidden and CSS3 animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed position lost with overflow hidden and CSS3 animation
    text
    copied!<p>Following on from <a href="https://stackoverflow.com/questions/11563612/css3-animations-breaking-fixed-positioning-when-page-scrolled">CSS3 animations breaking fixed positioning when page scrolled</a> I have created a <a href="http://jsfiddle.net/C95nq/" rel="nofollow noreferrer">test case</a> (webkit only). Code is copied below also.</p> <p>What I want is a fixed header and relatively positioned content. The reason the content is relatively positioned is because there are certain elements that are absolutely positioned inside the paragraph; although I've omitted them from this example.</p> <p>Of course adding <code>position:relative</code> to the <code>&lt;p&gt;</code> (without a <code>z-index</code>) causes the content to be stacked on top of the header which is not desired. i.e. if the CSS is just</p> <pre><code>#header { background-color:#f00; height:50px; width:100px; position:fixed; } p { width:100px; padding-top:50px; position:relative; } </code></pre> <p>then the text is visible over the header. So we add a <code>z-index:1</code> to the header to fix that. However, this still doesn't address the problem of the spinning image overflowing the header. I would have thought a simple <code>overflow:hidden</code> on the header would work. It seems to until the page is scrolled, whereupon the <em>fixed</em> header also scrolls.</p> <p>It seems to be the presence of <code>z:index</code> and <code>overflow:hidden</code>, although <code>auto</code> and <code>scroll</code> also break the layout and I want to know <strong>why?</strong></p> <p>Instead of <code>z-index:1</code> on the header I <strong>could</strong> use a <code>z-index:-1</code> on the <code>&lt;p&gt;</code> but that still doesn't explain why the combination of <code>z:index</code>, <code>overflow</code> and the CSS3 animation causes the fixed header to scroll.</p> <p>Lastly (and of course) removing the awful spinning animation makes the header fixed as expected. Please note, that I wouldn't ever have that animation on a page, it's just there to highlight the problem :-)</p> <p>Code showing the problem (only for webkit browsers)</p> <h3>HTML</h3> <pre><code>&lt;div id="header"&gt; &lt;div id="spinner"&gt;&lt;/div&gt; &lt;/div&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;br/&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; </code></pre> <h3>CSS</h3> <pre><code>body, p { margin:0; } #header { background-color:#f00; height:50px; width:100px; position:fixed; z-index:1; overflow:hidden; } #spinner { background:url(http://lorempixel.com/40/40/abstract/1/); height:44px; width:44px; margin:2px 0 0 2px; -webkit-animation: spin 2s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform:rotate(0deg)} 50% {-webkit-transform:rotate(720deg)} 100%{-webkit-transform:rotate(1440deg)} } p { width:100px; padding-top:50px; position:relative; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload