Z-Index/Transform-Style? Issues on Safari

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:

Designer Share:

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.


Hi there.

Not sure what issue you are specifically finding on Safari, but I checked on my version and have yet to duplicate your issue.

Can you make a video of your issue and post in here?

Yeah Brandon,

Thanks for taking a look.

After hours of frustration and fruitless attempts at fixing the issue, I changed the nesting formats for my divs/images/headers. This seems to have worked for some reason. I’m not complaining, I just don’t know why there was an issue to start.

Thanks for the help!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.