31899 2009-11-25 20:14:27 -0800 Can't combine CSS reflections with CSS perspective -- reflection isn't generated 2009-12-16 12:40:22 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac (Intel) OS X 10.6 RESOLVED DUPLICATE 31885 P2 Normal --- 0 gfesteves webkit-unassigned simon.fraser oldest_to_newest 166615 0 43890 gfesteves 2009-11-25 20:14:27 -0800 Created attachment 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. 172473 1 simon.fraser 2009-12-16 12:40:22 -0800 *** This bug has been marked as a duplicate of bug 31885 *** 43890 2009-11-25 20:14:27 -0800 2009-11-25 20:14:27 -0800 Test case, with the 3 examples I explained above. test.html text/html 1107 gfesteves PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCglp bWcgewoJCXdpZHRoOjE2MHB4OwoJCW1hcmdpbjoyNXB4OwoJfQoKCSNpbWFnZTEgewoJCS13ZWJr aXQtdHJhbnNmb3JtOiBwZXJzcGVjdGl2ZSgzMDApIHJvdGF0ZVkoMTBkZWcpOwoJCS13ZWJraXQt Ym94LXJlZmxlY3Q6YmVsb3cgMCAtd2Via2l0LWdyYWRpZW50KGxpbmVhciwgbGVmdCA3MCUsIGxl ZnQgYm90dG9tLCBmcm9tKHJnYmEoMCwwLDAsMCkpLCB0byhyZ2JhKDAsMCwwLDAuNSkpKTsKCX0K CQoJI2ltYWdlMiB7CgkJLXdlYmtpdC1ib3gtcmVmbGVjdDpiZWxvdyAwIC13ZWJraXQtZ3JhZGll bnQobGluZWFyLCBsZWZ0IDcwJSwgbGVmdCBib3R0b20sIGZyb20ocmdiYSgwLDAsMCwwKSksIHRv KHJnYmEoMCwwLDAsMC41KSkpOwoJfQoJCgkjaW1hZ2UzIHsKCQktd2Via2l0LXRyYW5zaXRpb246 YWxsIDFzIGxpbmVhcjsKCQktd2Via2l0LWJveC1yZWZsZWN0OmJlbG93IDAgLXdlYmtpdC1ncmFk aWVudChsaW5lYXIsIGxlZnQgNzAlLCBsZWZ0IGJvdHRvbSwgZnJvbShyZ2JhKDAsMCwwLDApKSwg dG8ocmdiYSgwLDAsMCwwLjUpKSk7Cgl9CgkKPC9zdHlsZT4KPC9oZWFkPgo8Ym9keSBvbmxvYWQ9 ImRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdpbWFnZTInKS5zdHlsZS53ZWJraXRUcmFuc2Zvcm0g PSAncGVyc3BlY3RpdmUoMzAwKSByb3RhdGVZKDEwZGVnKSc7ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5 SWQoJ2ltYWdlMycpLnN0eWxlLndlYmtpdFRyYW5zZm9ybSA9ICdwZXJzcGVjdGl2ZSgzMDApIHJv dGF0ZVkoMTBkZWcpJzsiPgoKCTxpbWcgaWQ9ImltYWdlMSIgc3JjPSJodHRwOi8vMTUubWVkaWEu dHVtYmxyLmNvbS90dW1ibHJfa3RvNTY5M0NiVjFxejR1ZWhvMV9jb3Zlci5wbmciIC8+Cgk8aW1n IGlkPSJpbWFnZTIiIHNyYz0iaHR0cDovLzE1Lm1lZGlhLnR1bWJsci5jb20vdHVtYmxyX2t0bzU2 OTNDYlYxcXo0dWVobzFfY292ZXIucG5nIiAvPgoJPGltZyBpZD0iaW1hZ2UzIiBzcmM9Imh0dHA6 Ly8xNS5tZWRpYS50dW1ibHIuY29tL3R1bWJscl9rdG81NjkzQ2JWMXF6NHVlaG8xX2NvdmVyLnBu ZyIgLz4KCjwvYm9keT4KCjwvaHRtbD4K