html - Chrome CSS Perspective not working on all blocks -


I have some strange behavior on a webshop that I am developing. One of the two points in Google Chrome that should be rotated remains flat. The other has been rotated properly everything works well in Firefox.

Any thoughts can be wrong?

There are screenshots (Firefox on the right and Chrome on the left side):

Chrome Firefox Here is the relevant HTML and CSS code:

  & Lt; Div id = "live-preview" class = "live-preview portrait" style = "color: RGB (192, 1 9 2, 192); font-family: Helvetica;" & gt; & Lt; Div class = "bg-image" id = "back" style = "background-image: url (http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);" Gt; & Lt; Div class = "bg-color" id = "back-bg" style = "background: RGBA (0, 0, 0, 0.498039);" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "bg-image" id = "spine" style = "background-image: url (http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);" Gt; & Lt; Div class = "bg-color" id = "spine-bg" style = "background: rgba (0, 0, 0, 0.498039);" & Gt; & Lt; Span class = "first-line" & gt; & Lt; / Span & gt; & Lt; Span class = "second-line" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "bg-image" id = "front" style = "background-image: url (http://www.fastermaster.at//templates/diplombinderei.at/images/material/0.jpg);" Gt; & Lt; Div class = "bg-color" id = "front-bg" style = "background: RGBA (0, 0, 0, 0.498039);" & Gt; & Lt; Span class = "first-line typo-large typo-center" & gt; Just a few lessons & lt; / Span & gt; & Lt; Span class = "second-line" & gt; & Lt; / Span & gt; & Lt; Span class = "third line" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; .portrait #front {true: 7; } .portrait #back, .portrait #front {status: absolute; Width: 132px; Height: 214 px; } # Front {transform: rotate (7 degrees); Webkit-transform: Rotate Y (7 degrees); -MMS-transform: Rotate Y (7 degrees); } Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citation, code, DFN ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, form, label, legend, table, caption, dune, tiffet, thi , Margin:,,,,,,,,,,,,,,,, 0; Padding: 0; Border: 0; Font-size: 100%; Font: heirs; Vertical-line: baseline; Text-decoration: None; } User Agent StylesheetDive {Display: Block; } Div # live-preview.live-preview.portrait Style attribution {color: RGB (192, 192, 192); Font-family: helvetica; } .live-preview {font-family: Times; Status: Relative; Margin-left: auto; Margin-right: auto; Margin-top: 30px; Margin-down: 30px; Perspective: 252px; -WebKit-Perspective: 252px; -MM-Perspective: 252px; Perspective-Origin: 50% -68%; -WebKit-Perspective-Basic-X: 50%; -webkit-perspective-base-y: -68%; -Ma-Perspective-Basic-X: 50%; -MM-perspective-base-y: -68%; }   

You can see the live page at

:

I tried to open the page in Incognito mode so that all Chrome extensions are disabled , But the result is still the same.

usually do cross-browser transforms

  #front {Conversion: Rotate (15deg); -MOZ-TRANSFORM: Rotate (15 degrees); / * / / MMS-transform for Firefox: Rotate (15 degrees); / / / WebKit for IE * Transform: To rotate (15 degrees); / * Safari, Chrome, iOS * / -O-Transform: Rotate (15 degrees); / * Opera * /}    

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -