Skip to content

Instantly share code, notes, and snippets.

@fform

fform/gist:5374586

Created April 12, 2013 19:46
Show Gist options
  • Save fform/5374586 to your computer and use it in GitHub Desktop.
Save fform/5374586 to your computer and use it in GitHub Desktop.
Download ZIP
Sketch css gradient bug in chrome
Raw
gistfile1.txt
<html>
<head>
<title>Demo</title>
</head>
<style type="text/css">
.square{
display:block;
width:150px;
height:150px;
}
#problem-1{
/* Rectangle 1: As copied from Sketch "Copy CSS Attributes"
Safari & Firefox will render this correctly
Chrome will use the non-prefix and the rotation is wrong
*/
background-image: -o-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -moz-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -webkit-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -ms-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
border: 1px solid #979797;
}
#problem-1-corrected{
/* Rectangle 1: */
background-image: -o-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -moz-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -webkit-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
background-image: -ms-linear-gradient(-90deg, #D8D8D8 0%, #000000 100%);
/* Chrome uses the linear-gradient without the prefix, but the first value is 90deg off */
background-image: linear-gradient(180deg, #D8D8D8 0%, #000000 100%);
border: 1px solid #979797;
}
#problem-2{
/* Rectangle 1:
Again, works fine in Safari & Firefox but in chrome, the non prefixed version is used and malformed
*/
background-image: -o-radial-gradient(90% 128%, #40A6FC 28%, #40A6FC 62%, #2537AC 100%);
background-image: -moz-radial-gradient(90% 128%, #40A6FC 28%, #40A6FC 62%, #2537AC 100%);
background-image: -webkit-radial-gradient(90% 128%, #40A6FC 28%, #40A6FC 62%, #2537AC 100%);
background-image: -ms-radial-gradient(90% 128%, #40A6FC 28%, #40A6FC 62%, #2537AC 100%);
background-image: radial-gradient(90% 128%, #40A6FC 28%, #40A6FC 62%, #2537AC 100%);
background: radial-gradient(90% 128%, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
border: 1px solid #979797;
}
</style>
<body>
<div id="problem-1" class='square'></div>
<div id="problem-1-corrected" class='square'></div>
<div id="problem-2" class='square'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment