css 3d perspective not showing up correctly in certain browsers


Tags: css,google-chrome,3d,windows-xp,perspective

Problem :

I have a bunch of images I've set up in css to appear as a 3d stack. It shows up correctly in Safari all the time (pc or mac) but only sometimes in Chrome. I haven't put in the Moz stuff so it certainly won't work there, but I'm aware of that and that's not the issue I'm dealing with. It seems Chrome on Mac (consistently) and on newer PCs works fine, but on my windows XP machine it doesn't work, and it's almost definitely an issue with the perspective property.

I've set up a jsfiddle isolating the section of the page: http://jsfiddle.net/4vXXd/

Here it is in chrome for windows xp with the perspective not working: enter image description here

and in Safari for windows xp working: enter image description here

Any thoughts on how to get this working?



Solution :

Chrome will only render 3D css in true perspective 3D if GPU acceleration is enabled. If it isn't, it will instead use a kind of quasi-3d isometric projection.

To see if your chrome has GPU acceleration enabled, type about:GPU into the address bar and see what it says.


    CSS Howto..

    Am centering content vertically using css, how to remove empty space?

    How to make hover use border-radius first-child

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    How to animate text with css font-weight property in jQuery ? normal to bold

    how to make DIV show up on top of other Divs

    Using jQuery to show/hide list items

    How to prevent in-line list from wrapping

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    How to ease the whole css animation

    How do I change the MVC Bootstrap layout to have more than one columns

    How do I use CSS in Django?

    How to blur background img - css?

    Homepage build - How to use CSS more efficiency?

    How to create a similar background to this one

    How to reset parent child relationship between nested div

    How to use css media query to switch animations

    How to change the cursor icon when dragging in HTML5?

    How do I solve this IE7 margin issue?

    How can I tell if a particular CSS property is inherited with jQuery?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How do I get a td background color to stretch from left to right, not just the table width, in html & css?

    How to apply CSS to navigation bar with master pages?

    How to increase width of image when dimensions are not known in CSS?

    How to scroll right and left by mouse scroll button

    How to spread three columns in CSS across a page equally

    How to use -webkit-appearance: searchfield-results-decoration?

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How to comment in-line CSS?

    How to do Vertical+Horizontal centering in CSS