Streaming live at 10am (PST)

Children perspective 3D effect not showing on Chrome

I was following the Design Portfolio Course when I got stuck on the 3D password grid.

I followed the video step-by-step but somehow my designer gave me different results. After a while I found out that the effect was already there, just wasn’t showing on Chrome.

Here’s a screenshot of the exact same page on Chrome(left) and Safari(right). Please help me get over with this problem.

Hi @rolling.one, thanks for your post. Could you help to confirm what version of chrome you are running?

Would it be possible for you to help share some additional detail that will help the community to provide assistance?

A link to the published site where the grid is not showing the perspective would be helpful also.

Thanks in advance

Hi @cyberdave The version of Chrome is 94.0.4606.71 (Official Build) (arm64).

Here are some updates:

  1. After some certain move I made, it succeeded to work in the preview mode, but is still not working in the designer. Now it looks all black with some glowing red edges. But if I rotate the thing even 1°, the effect starts to show.
    Oct-11-2021 17-50-22

  2. While the preview looks fine on Chrome, the password box is cut by the 3D model on Safari.
    Oct-11-2021 17-52-20

Sorry I did not provide a read-only link, I was too nervous to share a half-done website to others. Here it is: Read-Only Link

Hi @rolling.one, just a question, are you using any custom code on the project? Custom code only renders in the published site, not the designer.

Yes. One piece of custom code provided by the crash course, which is exactly what we are looking at: the frosted panel.

<style>
.frosted-glass {
 -webkit-backdrop-filter: saturate(200%) blur(20px) brightness(100%);
 backdrop-filter: saturate(200%) blur(20px) brightness(100%);
}
</style>

Hi @rolling.one, thanks for that, also does the same behavior happen on the published site? Custom code is not normally rendered in the designer, styles usually do, but sometimes on the published site.

Chrome Designer: :ok_hand:no bug
Chrome published site: :ok_hand:no bug
Safari Designer: 🙅bug
Safari published site: 🙅bug

@cyberdave In case I forgot to click “reply”…

Hi @rolling.one, thanks for your reply. It looks like Safari is needing some additional movement along the z-axis on the Utility Page Content wrapper.

Shared with CloudApp

When I add this 200px move for the Utility Page Content div, then the animation works ok for Safari on my end and there is no overlap.

I would try that next and see how it works for you.