 Forums
|
|
|
|
Page 1 of 1
|
[ 2 posts ] |
|
Wrong background gradient when use with transform
| Author |
Message |
|
qvsoft
Joined: Thu Dec 13, 2012 4:22 am
Posts: 4
|
 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
|
| Sun Dec 16, 2012 10:38 pm |
|
|
|
qvsoft
Joined: Thu Dec 13, 2012 4:22 am
Posts: 4
|
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
|
| Sun Dec 16, 2012 11:05 pm |
|
|
|
|
Page 1 of 1
|
[ 2 posts ] |
|
Who is online |
Users browsing this forum: Bing [Bot], Google [Bot] and 3 guests |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
|
|