[Webkit-unassigned] [Bug 31899] New: Can't combine CSS reflections with CSS perspective -- reflection isn't generated
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Nov 25 20:14:27 PST 2009
https://bugs.webkit.org/show_bug.cgi?id=31899
Summary: Can't combine CSS reflections with CSS perspective --
reflection isn't generated
Product: WebKit
Version: 528+ (Nightly build)
Platform: Macintosh Intel
OS/Version: Mac OS X 10.6
Status: UNCONFIRMED
Severity: Normal
Priority: P2
Component: CSS
AssignedTo: webkit-unassigned at lists.webkit.org
ReportedBy: gfesteves at gmail.com
Created an attachment (id=43890)
--> (https://bugs.webkit.org/attachment.cgi?id=43890)
Test case, with the 3 examples I explained above.
Hello. Please bear with me while I try to explain this, because I'm not sure I
can do that clearly enough.
OVERVIEW:
Basically, what I'm trying to do is something like the interface of an iPod
classic: an image, in perspective, with a reflection below it. Like this:
http://dl.dropbox.com/u/18226/desired-result.png
STEPS TO REPRODUCE:
What I tried was very simple:
#image1 {
-webkit-transform: perspective(300) rotateY(10deg);
-webkit-box-reflect:below 0 -webkit-gradient(linear, left 70%, left
bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
}
EXPECTED RESULTS:
An image that is tilted in perspective, with a reflection. Like this one:
http://dl.dropbox.com/u/18226/desired-result.png
ACTUAL RESULTS:
>From my tests, on Mac OS X 10.6.2 with Safari 4.0.4, I can't get both
properties to play nice. I can either use the perspective, or the reflection,
but not both at the same time. When I use both properties, I get the
perspective, but not the reflection.
ADDITIONAL INFORMATION:
What I tried next was to apply just the reflection, and then apply the
perspective after page load, with JavaScript, like so:
#image2 {
-webkit-box-reflect:below 0 -webkit-gradient(linear, left 70%, left
bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
}
And on page load, I tried to do
document.getElementById('image2').style.webkitTransform = 'perspective(300)
rotateY(10deg)';
This didn't work either. Finally, I used the -webkit-transition property so
that the perspective is applied slowly:
#image3 {
-webkit-transition:all 1s linear;
-webkit-box-reflect:below 0 -webkit-gradient(linear, left 70%, left
bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
}
And on page load, document.getElementById('image3').style.webkitTransform =
'perspective(300) rotateY(10deg)';
This worked! It produced an image that was in perspective, and had a
reflection. It seems that the only way to combine a reflection with a 3D
transform is to apply the reflection first, and then the perspective, but only
if you use -webkit-transition so the perspective is applied slowly. I tested
this in Safari 4.0.4; this workaround doesn't work anymore in WebKit nightly
r51397. In the nightly, there doesn't seem to be a way to use both properties
at the same time. I'm uploading an HTML file with the three examples so you can
try it out.
--
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.
More information about the webkit-unassigned
mailing list