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..

    How can I create Input field over full screen, image slideshow

    How can I get the post text to be beside the avatar and not below it?

    How can I use d3.js filter to assign different css classes to elements?

    How to use ViewContext?

    How to transform xPath to CSS Selector

    How to center navbar elements vertically (Twitter Bootstrap)?

    How to check if the current page is a plugin admin panel in wordpress

    How to fix specific div's position in CSS

    How can I make a similar shape to a parallelogram in css?

    How to properly align icon and text in a table?

    CSS Dropdown menu - How to add thumbnails

    CSS How to force DIVs side by side with text overflow?

    How to pick with css multiple select tags that has at least one option selected?

    Understanding how menus work in html5 and css3

    How to make a responsive text inside a bootstrap button

    How to change the color of an active h5 tab using jQuery or CSS

    How to add Navigation dropdown menu?

    Flex - understanding how to properly reference an image in a library project css file

    How to make this slider control to work in both directions?

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How do I create triangles like this? [closed]

    CSS Nav Menu Text rare behaviour in size thats aligned bottom some how

    div content shows when display:none

    How can I select this element?

    How do I display image flush with other images after a clear?

    How does floating and clearing on the same element work?

    How to change the display property in a css class using js when user clicks a button

    How to line up items of varied length in a resizable space in CSS?

    How to setup counters for target-counters

    How does one target IE7 and IE8 with valid CSS?