Geek Answers Handbook

Fixed loss of position when overflowing hidden animations and CSS3 animations

After CSS3 animations that violate fixed positioning when scrolling a page, I created a script (webkit only). The code is also copied below.

What I want is a fixed title and relatively positioned content. The reason that content is relatively positioned is because there are certain elements that are absolutely located within the paragraph; although I omitted them from this example.

Of course, adding position:relative to the <p> (without z-index ) causes the content to fit on top of the header, which is undesirable. those. if CSS is just

 #header { background-color:#f00; height:50px; width:100px; position:fixed; } p { width:100px; padding-top:50px; position:relative; }

then the text is displayed above the heading. Therefore, we add z-index:1 to the header to fix this. However, this still does not address the header overflow problem. I would have thought that a simple overflow:hidden in the header would work. It seems until the page scrolls, after which the fixed title will also scroll.

It seems to have z:index and overflow:hidden , although auto and scroll also break the layout, and I want to know why?

Instead of z-index:1 in the header, I could use z-index:-1 on <p> , but that still doesn’t explain why the combination of z:index , overflow and CSS3 Animation causes the fixed header to scroll.

Finally (and, of course), removing the awful spinning animation makes the title fixed as expected. Please note that I never had this animation on the page, it is just there to highlight the problem :-)

Code showing the problem (webkit browsers only)

HTML

 <div id="header"> <div id="spinner"></div> </div> <p>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.<br/>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.</p>

CSS

 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; }
+4
source share
2 answers

Try adding:

 -webkit-transform: translate3d(0, 0, 0); transform : translate3d(0, 0, 0);

to a fixed element on the page. It seems that the animation requires it to say in what perspective they should exist, setting 3d to 0 will mean 2d.

+4
source

This is certainly a weird behavior and probably a webkit error, but I managed to fix the problem by enclosing an additional div.

HTML

 <div id="header"> <div id="fix"> <div id="spinner"></div> </div> </div>

CSS

 #header { background-color:#f00; height:50px; width:100px; position:fixed; z-index:1; } #fix{ height:100%; overflow:hidden; }

Check out this jsfiddle: http://jsfiddle.net/C95nq/23/

For some reason, this combination of properties breaks, but moves the overflow: hidden in its own div seems to fix the problem.

+1
source

More articles:


All Articles