SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS3 tip of the week No:1

    I've just run into a small bug I've not seen documented anyway so I'll post it here for all to see.

    If you apply "backface-visibility:hidden" (used in css3 transforms and transitions) to a parent of a fixed positioned element then that element loses its fixed position in Chrome and Firefox.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 - tip of the week - No.1</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    }
    h1, p { margin:1em 25px; }
    .test {
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-ms-backface-visibility:hidden;
    	-o-backface-visibility:hidden;
    	backface-visibility: hidden;
    }
    .fixed {
    	position:fixed;
    	top:0;
    	right:0;
    	height:50px;
    	line-height:50px;
    	background:red;
    	padding:10px;
    }
    .code {
    	margin:25px;
    	background:#666;
    	color:#fff;
    	padding:20px;
    	width:400px;
    }
    </style>
    </head>
    
    <body>
    <h1>Avoid "<a href="http://css-tricks.com/almanac/properties/b/backface-visibility/">backface-visibility: hidden"</a> on parents of elements placed with position:fixed</h1>
    <p><strong>Affects Chrome and Firefox</strong></p>
    <div class="test">
    		<p class="fixed">I should be "position:fixed" to top right</p>
    </div>
    <div class="code">
    		<pre>
    .test {
    	position:relative;
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	backface-visibility: hidden;
    }
    .fixed {
    	position:fixed;
    	top:0;
    	right:0;
    	height:50px;
    	line-height:50px;
    	background:red;
    	padding:10px;
    }
    
    </pre>
    </div>
    <div class="code"> &lt;div class=&quot;test&quot;&gt;<br>
    		&lt;p class=&quot;fixed&quot;&gt;I should be &quot;position:fixed&quot; to top right&lt;/p&gt;<br>
    		&lt;/div&gt; </div>
    <p>Affects Chrome and Firefox</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    <p>some content to cause page scroll</p>
    </body>
    </html>

    The solution is to removed the fixed element from that context so that it has no parent with the backface property applied. In most cases that should not be a problem as fixed positioned elements take their co-ordinates from the viewport so it makes no difference which context they lie in (unless you are using auto positioning and then it could be a real nuisance).

    There is a similar but unrelated bug in transforms I believe but the mechanics are different.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •