CSS3 PIE Forums - View topic - Wrong background gradient when use with transform

FAQ • Search • Login

Register

View unanswered posts | View active topics

It is currently Thu Jun 20, 2013 5:19 am

Wrong background gradient when use with transform

Page 1 of 1

[ 2 posts ]

Print view

Previous topic | Next topic

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
Display posts from previous: Sort by

Page 1 of 1

[ 2 posts ]

Who is online

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

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.