Skip to content

Instantly share code, notes, and snippets.

@aflatter

aflatter/test.html

Created December 15, 2011 14:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save aflatter/1481312 to your computer and use it in GitHub Desktop.
Save aflatter/1481312 to your computer and use it in GitHub Desktop.
Download ZIP
Webkit transitions on a newly attached element don't work. Probably related to http://code.google.com/p/chromium/issues/detail?id=82500
Raw
test.html
<html>
<head>
<title>Test</title>
<style type="text/css">
div {
position: absolute;
height: 200px;
}
.slide {
background: yellow;
width: 200px;
overflow: hidden;
}
.container {
background: blue;
width: 400px;
}
.left {
background: red;
width: 200px;
}
.right {
background: green;
width: 200px;
left: 200px;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
var html = '<div class="pane">' +
'<div class="slide">' +
'<div class="container">' +
'<div class="left"></div>' +
'<div class="right"></div>' +
'</div>' +
'</div>' +
'</div>';
var el = $(html); container = el.find('.container');
el.appendTo('body');
container.css({'-webkit-transition-duration': '200ms', '-webkit-transition-property': 'left'});
// console.log(container[0].offsetHeight);
container.css({'left': '-100px'});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment