Cross Browser perspective solution?

Question

What the problem is

I have tested this scenario of perspective usage ( a w3C validated webpage with all necessary and optional CSS browser tags) in IE, Firefox, Chrome, and Opera and found different (all inaccurate) results. So far it appears that the web browsers have all implemented perspective with slightly different displays. This question is here to see if maybe I'm missing something and there is a cross browser solution available.

If no one has a solution, well then, we have an interesting situation. Before now, I've never seen a feature in CSS that acts noticeably and irreparably inaccurate between all browsers.

I hope I'm wrong, because if not, I have to create and maintain three separate style sheets via php or javascript browser checking, a method that is very clearly out of date and frowned upon in today's web design. We prefer to use Modernizr to check features rather than browsers now, but this situation would prove that solution inviable.

Example Situation:

In Chrome, I positioned an iPhone interface simulating the use of a particular home automation app on the phone to control the channel of the tv in the background (an actual video), where the tv and iphone are made to look like they are part of the image with perspective and transform.

However, when looking at this from Firefox, the elements are completely out of place, as you can see below.

Question:

Is there any cross browser solution that will allow me to produce this result without using separate style sheets for different browsers?

Live JS Fiddle:

http://jsfiddle.net/qZSYy/1/

Purpose:

I'm developing a website for a technology company, and one of the main services provided is home automation. With a remote, or an iPhone or iPad, you can control a home's lighting, music, tv, etc. Very cool. So, I've decided to develop a section of the home automation page that simulates this.

On Chrome, it looks like this right now:

On Firefox:

Notes:

The iphone screen is actually a separate element, that turns on when hovered over and remains lit up for 10 seconds. I'm designing an interface on the iphone that will control the room's different lights, the speakers, and the tv, which is actually a separate div also that can be controlled by the iPhone as well to change channels.

The background is an image that I've render through Blender and can render different versions for the lighting changes.

CSS:

.home-auto-interactive {
width: 1250px;
height: 700px;
background-color: gray;
background-image: url('http://www.testing.agcomputers.net/style/images/Room_1.jpg');

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
-webkit-perspective: 80;
margin-left: auto;
margin-right: auto;
}

.home-auto-wrap {
width: 100%;
background-color: #252525;
}

.tv-screen {
width: 8.12%;
height: 7.8%;
position: absolute;

-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
-ms-transition: -ms-transform .5s;
transition: transform .5s;

-webkit-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%)    translateY(490%);
-moz-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-o-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-ms-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
}

.iphone-screen {
width: 22.7%;
background-color: black;
background-image: url('http://www.testing.agcomputers.net/style/images/iphone_screen_test.jpg');

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
height: 50.8%;
bottom: 12.7%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
position: absolute;

-webkit-transition-delay: 10s !important;
-moz-transition-delay: 10s !important;
-o-transition-delay: 10s !important;
-ms-transition-delay: 10s !important;
transition-delay: 10s !important;

-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
transition: opacity 0.5s;

-webkit-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-moz-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-o-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-ms-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
}

.iphone-screen:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;

-webkit-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-o-transition-delay: 0s !important;
-ms-transition-delay: 0s !important;
transition-delay: 0s !important;
}

HTML:

<div class="home-auto-wrap">
<div class="home-auto-interactive"><!-- begin home auto interactive :: this has the purpose of displaying an interactive home automation area -->
<div class="tv-screen"><!-- begin tv screen -->
    <iframe width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div><!-- end tv screen -->
<div class="iphone-screen"><!-- begin iphone screen -->

</div><!-- end iphone screen -->
</div><!-- end home auto interactive -->
</div>

Answer 1

You are missing the transform-style: preserve-3d; on the parent element. Also place the perspective property here, more on that later:

.home-auto-wrap {
width: 100%;
background-color: #252525;
transform-style: preserve-3d;
perspective: 80px;
}

This is part of the problem as Firefox requires it, Chrome does not - this explains why it works there. The next issue with Firefox is that overflow: hidden set on .home-auto-interactive causes all descendant elements to be flattened according to the spec: W3C Transform-style.

A workaround for this is to place the divs .tv-screen and .iphone-screen after .home-auto-interactive and position them atop. Now the 2 divs you are transforming will not be impeded.

Also opacity other than 1 will cause any descendant elements to flatten in 3D transforms, so be careful to keep that property for a div in the body with no transforming children (use z-index to position elements behind or in front of said div), or on the last node of a transforming element itself.

The background image property is not animatable, so you need to use an image tag to pull this off.

The issues you cite with TV could be due to:

1. The iframe, try applying the class to the iframe, though it should work as is.

2. The extra 0 transforms, get rid of these regardless.

3. The whole overflow thing, check the link above if you haven't done so.

Also, the filter property set other than none can lead to the same issue as the overflow and opacity, once again as per spec. It is not needed since IE 9, so unless you have some fallback reasons for doing so, removal is a good thing to consider. The opacity property has the same or better support than the 3D transforms:

Can I use opacity, check the 3d transforms too, I can't post more links yet. While you are at that page, check out the HTML5 video tag, it also has browser support as good as the 3d tranforms.

Answer 2

It looks like you need another prefix. Anywhere you call -webkit-perspective, you also need to call -moz-perspective. And the perspective needs a value: ems, px, etc..

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
http://css-tricks.com/almanac/properties/p/perspective/

This gave the elements perspective, but when you use position:absolute;, you need to also give a parent a defined position like position:relative;.

http://jsfiddle.net/NyXSa/7/

.home-auto-interactive {
    width: 1250px;
    height: 700px;
    background-color: gray;
    background-image: url('http://www.testing.agcomputers.net/style/images/Room_1.jpg');

    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    overflow: hidden;
    -webkit-perspective: 80px;
    -moz-perspective: 80px;
    perspective: 80px;
    margin-left: auto;
    margin-right: auto;

    position:relative;
}