Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialKent Hefley
11,217 PointsAnyone else having trouble with the cube in Chrome?
The cube doesn't seem to be working properly in Chrome. In both the final project files and workpaces, it's as if the front image has the wrong z-index. It works perfectly in Firefox.
4 Answers
Adam Pizzo
Python Development Techdegree Graduate 19,355 PointsHello Kent,
I added the:
backface-visibility: hidden;
property to the .front, .back, .left, .right rule to make it so that it wasn't having that weird graphical issue. I wasn't seeing it on Firefox, but I was seeing it on chrome. Hope it helps you or anyone else seeing that.
Irina Piliugina
8,678 PointsThank you a lot Adam Pizzo. You solved my problem!
Adam Pizzo
Python Development Techdegree Graduate 19,355 PointsGlad it helped!
:)
Kent Hefley
11,217 PointsI have tested this on other computers. It is not working properly in Chrome.
again here is a link demonstrating the issue. https://youtu.be/W_mzVI67iEM
KRIS NIKOLAISEN
54,971 PointsI uploaded the project files to a workspace and to me the page looks identical in Chrome and Firefox
Kent Hefley
11,217 PointsThis is very odd. It does not display correctly in any case of google chrome for me. I've opened the code in live server on vs code, tried the workspace, and even codepen. I've checked for chrome updates, windows updates and graphic driver updates. I've tried this with all extensions disabled. It works fine in Firefox, Opera and Edge.
I have recorded a short video showing the problem https://youtu.be/W_mzVI67iEM
Carmina De la Pena
4,010 PointsCarmina De la Pena
4,010 PointsThanks Adam! Been scratching my head for 30 mins and I thought it has something to do with the values on the translate/rotate numbers. This solved my problem!
Kent Hefley
11,217 PointsKent Hefley
11,217 PointsThat was the issue. Thank you for doing the legwork in finding the solution. I couldn't figure it out.
Julianna Kahn
20,702 PointsJulianna Kahn
20,702 PointsYes, that took care of the problem. Thank you so much for posting. At first it was impossible to find out what I might of done wrong. Then I ran Guil's "final" file and that didn't work right either. So nice to get this resolved.
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Pointsshaun bolak
Front End Web Development Techdegree Graduate 18,080 PointsI had the same see-thru cube effect that was in the video that Kent posted. To fix this, I added your fix plus perserve-3d to the .front, .back. left, .right rule. I hope this helps anyone who is still having an issue: