Skip to content

Instantly share code, notes, and snippets.

@LeZuse

LeZuse/transform_offset.html

Created March 12, 2012 00:27
Show Gist options
  • Save LeZuse/2018857 to your computer and use it in GitHub Desktop.
Save LeZuse/2018857 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Transform offset chain modification
Raw
transform_offset.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="Piffle team">
<style>
body{
height:3000px;
}
.a{
margin: 300px auto;
border:2px solid red;
position:relative;
width:600px;
height:600px;
/* Disable the following line to see the difference */
-webkit-transform:scale(1);
}
.b{
position:fixed;
top:0;
left:0;
background:blue;
width:100%;
height:100%;
}
</style>
</head>
<body class="">
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
@LeZuse
Copy link
Author

LeZuse commented Mar 12, 2012

A simple example showing how CSS transforms influence the offset chaining of the target element.
Without transform everything behaves like expected. The .b element stretches over the whole viewport.
But with transformation enabled, the .b element behaves like position:absolute is set. And there is NO reflection of this behavior from the technical side of things whatsoever. Javascript still reports .b element has position:fixed and offsetParent is set to null.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment