CSS3 PIE Forums
http://css3pie.com/forum/

Wrong background gradient when use with transform
http://css3pie.com/forum/viewtopic.php?f=3&t=1932
Page 1 of 1

Author:  qvsoft [ Sun Dec 16, 2012 10:38 pm ]
Post subject:  Wrong background gradient when use with transform

PIE render wrong Gradient background if use with transform, you can see the example bellow, one use gradient image, one use PIE gradient background.

CSS:
Code:
.transform_bg_image {
   background: url("gradient_image.png") repeat-x scroll left top transparent;

    -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;
}

.transform_bg_pie {
   background: #FFFFFF;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F1F1F1), to(#FFFFFF));
   background: -webkit-linear-gradient(#F1F1F1, #FFFFFF);
   background: -moz-linear-gradient(#F1F1F1, #FFFFFF);
   background: -ms-linear-gradient(#F1F1F1, #FFFFFF);
   background: -o-linear-gradient(#F1F1F1, #FFFFFF);
   background: linear-gradient(#F1F1F1, #FFFFFF);
   -pie-background: linear-gradient(#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;
}




Attachments:
File comment: PIE background, it's wrong!
pie_bg.jpg [49.52 KiB]
Not downloaded yet
File comment: Image background! It works well!
image_bg.jpg [60.05 KiB]
Not downloaded yet

Author:  qvsoft [ Sun Dec 16, 2012 11:05 pm ]
Post subject:  Re: Wrong background gradient when use with transform

CSS code above(last post) are rendered the same with IE/Firefox.

But this css is different between IE/Firefox(It's reverted in IE):
.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;
}

Attachments:
File comment: See the background between IE/Firefox
Untitled-6.jpg [43.23 KiB]
Not downloaded yet

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/