The window div was rotated by 45 degrees and it had a perspective look to it. As in the top was pinched while the bottom was widened. I opened the same file again in Chrome and no matter what I did, the perspective effect never showed up. The same happened in Safari.
@chrisburton Oh no, I just changed it to the -moz- prefix to test if it worked on Firefox, which it did. But when using the -webkit- prefix, it just flat out doesn't show the perspective in Chrome nor Safari.
Ok so a few weeks ago I got this working perfectly
The window div was rotated by 45 degrees and it had a perspective look to it. As in the top was pinched while the bottom was widened. I opened the same file again in Chrome and no matter what I did, the perspective effect never showed up. The same happened in Safari.
What am I doing wrong?
Does this example work on your browsers?
Works fine for me in Chrome on OS X: http://jsfiddle.net/joshnh/PdzE2/
@DustinWoods No. It rotates the squares rotated and when I use the slider, nothing changes.
@joshuanhibbert Can you post a screenshot so I can see what I'm supposed to be seeing?
EDIT: Well this is weird. It actually works in Firefox: http://jsfiddle.net/PdzE2/1/
@TheInfection http://cloud.chrisburton.me/Llz5
@chrisburton Do you think it could be a problem with Chrome and Safari? Because Firefox loads it perfectly fine.
It's not working in webkit browsers because you have only specified the -moz- prefix. Add -webkit- as well.
http://jsfiddle.net/PdzE2/2/
@chrisburton Oh no, I just changed it to the -moz- prefix to test if it worked on Firefox, which it did. But when using the -webkit- prefix, it just flat out doesn't show the perspective in Chrome nor Safari.
It works fine for me in Firefox, Chrome and Safari. What versions are you using?
@chrisburton
Chrome: 23.0.1271.97 m
Safari: 5.1.7 (7534.57.2)
Firefox: 17.0.1
Screenshot the jsfiddle I posted using Chrome.
http://i.imgur.com/cFbrA.png
@TheInfection In the address bar in Chrome, type: chrome://gpu/
Screenshot that and show me.
http://i.imgur.com/dQAQ2.png
@TheInfection Hardware acceleration isn't support for 3D CSS rendering. That is why you don't see it.
@chrisburton Damn. Is there anything I can do about it?
Let me check
Download this extension for Chrome - https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en
In a new tab, type: about:flags
Click on that extension I had you download and choose Capture Entire Page. Save it, upload it and paste the URL.
The options are greyed on the Awesome Screenshot plugin. Although, I'm guessing I have to enable "GPU compositing on all pages"
Read this: http://blog.laptopmag.com/enable-hardware-acceleration-in-chrome-10-firefox-4
@chrisburton It didn't seem to work.
I'm not sure what else to suggest. All I can say is that it does work on my computer.
@chrisburton Alright then. Thanks for the help anyways!