Bug 31899 - Can't combine CSS reflections with CSS perspective -- reflection isn't generated
Summary: Can't combine CSS reflections with CSS perspective -- reflection isn't generated
Status: RESOLVED DUPLICATE of bug 31885
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Intel OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-11-25 20:14 PST by Guillermo Esteves
Modified: 2009-12-16 12:40 PST (History)
1 user (show)

See Also:


Attachments
Test case, with the 3 examples I explained above. (1.08 KB, text/html)
2009-11-25 20:14 PST, Guillermo Esteves
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Guillermo Esteves 2009-11-25 20:14:27 PST
Created attachment 43890 [details]
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.
Comment 1 Simon Fraser (smfr) 2009-12-16 12:40:22 PST

*** This bug has been marked as a duplicate of bug 31885 ***