Wrong background gradient when use with transform #254

Closed
qvsoft opened this Issue Dec 21, 2012 · 1 comment

Projects

None yet

2 participants

@qvsoft
qvsoft commented Dec 21, 2012

bg_reverted

This css is reverted in IE:
Please try this in FF and IE, you will see

.test_pie{
background: #F1F1F1;
background: -webkit-gradient(linear, left top, right top, from(#F1F1F1), to(#FFFFFF));
background: -webkit-linear-gradient(left, #F1F1F1, #FFFFFF);
background: -moz-linear-gradient(left, #F1F1F1, #FFFFFF);
background: -ms-linear-gradient(left, #F1F1F1, #FFFFFF);
background: -o-linear-gradient(left, #F1F1F1, #FFFFFF);
background: linear-gradient(left, #F1F1F1, #FFFFFF);
-pie-background: linear-gradient(left, #F1F1F1, #FFFFFF);

-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}

http://css3pie.com/forum/viewtopic.php?f=3&t=1932

@lojjic lojjic added a commit that referenced this issue Jan 26, 2013
@lojjic Convert IE9 linear-gradient rendering from SVG to Canvas. This avoids…
… strange issues when the element has rotation/etc. transforms; see issue #254.
28fa814
@lojjic
Owner
lojjic commented Jan 26, 2013

This commit seems to fix the issue: 28fa814

The bug was inconsistent but it seemed to be due to bugginess in IE9's application of SVG background images when transforming. I've changed the rendering from generating a SVG background to drawing into a hidden and using getDataURL() to get a PNG of the gradient. This was something I had considered doing anyway, but getting around this transform bug is an additional benefit.

@lojjic lojjic closed this Jan 26, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment