Forums
View unanswered posts | View active topics It is currently Fri Apr 18, 2014 7:49 pm



Reply to topic  [ 2 posts ] 
 Wrong background gradient when use with transform 
Author Message

Joined: Thu Dec 13, 2012 4:22 am
Posts: 4
Post 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
Profile

Joined: Thu Dec 13, 2012 4:22 am
Posts: 4
Post 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
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Bing [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

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.