I’m having issues getting my 3d hover rotate effect to properly work on Safari. I have a project title set to a significantly higher Z-Index and a project description set to a lower Z-Index than my project image. These interactions are working perfectly on Chrome & Firefox, however Safari keeps intersecting my images and text when rotating within 3d space.
This is my first site build using anything outside of Squarespace so I’m sure there is probably something fishy in my styles or custom code causing this to happen. However I’ve scoured the internet for some aid and everything I’ve found hasn’t worked.
Most recent published version:
https://adams-first-project-fc585f.webflow.io/
Custom Code I’ve Placed
.work{transform-style: flat; -webkit-transform-style: flat;} .content-wrapper{transform-style: flat; -webkit-transform-style: inherit;} .project-image{transform-style: flat; -webkit-transform-style: inherit;} .project-title{transform-style: flat; -webkit-transform-style: inherit;} .right-details-01{transform-style: flat; -webkit-transform-style: inherit;} .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} .nulltext{ cursor: none; pointer-events: none;} .cursor-wrapper{ pointer-events: none; } @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { body { cursor: default; } .cursor-wrapper { display: none; } a { cursor: pointer; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { body { cursor: default; } .cursor-wrapper { display: none; } a { cursor: pointer; } }Any help is… well… helpful.
Thanks!
-Hodge