html - CSS3 3D Transformations not working in Chrome (Linux) -
You will need Linux chrome to see it. On my dev site (see three boxes below), my backfoss is showing through them. How can I fix this?
CSS ...
. Container {status: relative; -Winkit-perspective: 800; -Moz-perspective: 800; Perspective: 800; Background: None; }. Pumpkinhead {width: 100%; Height: 15em; Webkit-conversion-style: protected-3D; -Wbkit-Infection: 1s; -MOZ-Transform-Style: Protected-3D; -Moose infection: 1s; Conversion-style: protection-3d; Infection: 1s; }. Container: Hover Pumpkinhead {-VBKit-transform: Rotate Y (180 degrees); -MOZ-TRANSFORM: Rotate Y (180 degrees); Convulsually rotate (180 degrees); } .face {status: complete; Webkit-Backfiest-Visibility: hidden; -MOZ-BACKEX-visibility: hidden; Backfirst-visibility: hidden; Z-index: 5; }. Back {width: 66%; Height: 127%; Webkit-transform: rotate (180 degrees); -MOZ-TRANSFORM: Rotate Y (180 degrees); Convulsually rotate (180 degrees); Background: # 000000; Background: -WebKit-Linear-Slope (Top, RGBA (0,0,0,0.65) 0%, RGBA (0,0,0,0) 100%); Z-index: 4; Padding: 15%; } html ...
& lt; Div class = "row-fluid" & gt; & Lt; Div class = "span 4 cooketer" & gt; & Lt; Div class = "pumpkin" and gt; & Lt; Div square = "face face" & gt; & Lt; H2 square = "g2-unit-header" & gt; ... & lt; / H2 & gt; & Lt; P style = "minimum-height: 240px;" & Gt; ... & lt; / P & gt; & Lt; P & gt; & Lt; A href = "#" class = "btn btn-info" & gt; ... & lt; / A & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div square = "face back" & gt; & Lt; P & gt; This is my back fool! & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; Notice I am using Bootstrap (span4), but I believe this is messing up because it is working in Chrome and Windows.
. I want to support this new CSS3 technology if I want to play it with most browsers.
This is what I can tell, a bug in the recent build of Chrome on Linux (I Have not yet tested on other platforms); You will see that every other site using the same CSS changes now has a problem of showing through a backup. I have also noticed on my own site that the perspective is not being presented anymore.
Annoying, we must remember that prefixed CSS features are still experimental, and we should not be reliant on them to be stable or to be present.
Comments
Post a Comment