Skip to content

Instantly share code, notes, and snippets.

@jacksctsai

jacksctsai/safari-css-transition-test.html

Created November 13, 2013 06:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jacksctsai/7444652 to your computer and use it in GitHub Desktop.
Save jacksctsai/7444652 to your computer and use it in GitHub Desktop.
Download ZIP
This makes safari crashes. Try to hover the blue box and you will see...
Raw
safari-css-transition-test.html
<html>
<style media="screen" type="text/css">
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 300px;
min-height: -moz-calc(100% - 1px);
min-height: -o-calc(100% - 1px);
min-height: -webkit-calc(100% - 1px);
min-height: calc(100% - 1px);
background-color: #0000FF;
-moz-transition:width 2s, min-height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, min-height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, min-height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, min-height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 400px;
min-height: -moz-calc(100% - 2px);
min-height: -o-calc(100% - 2px);
min-height: -webkit-calc(100% - 2px);
min-height: calc(100% - 2px);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
<body>
<div class="box"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment