Cube effect on Web Elements is not working on safari

[closca]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/kuq46v?file=%2Findex.html

Bug description

The cube effect, implemented using Element, is not working on Safari.
It can be reproduced directly on the official codesandbox.io example.

Expected Behavior

The effect should work.

Actual Behavior

The effect is not working

Swiper version

9

Platform/Target and Browser Versions

macOs Safari, iOS Safari

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nolimits4web]

It is a known bug in Safari, nothing can do with it for now

[oalexdoda]

Any workarounds for this? It makes the cube effect useless... can't use it on iOS or macOS at all. Plenty of 3D stuff working in Safari, why doesn't Swiper's? @nolimits4web

[nolimits4web]

Any workarounds for this? It makes the cube effect useless... can't use it on iOS or macOS at all. Plenty of 3D stuff working in Safari, why doesn't Swiper's? @nolimits4web

You can still use core version

[clockworkaiesh]

I am facing the same issue. The cube effect doesn't work on Safari as expected. Not only do the navigation arrows flicker and disappear, but the app crashes as well.

[nolimits4web]

3d effects in swiper element in safari will be fixed in swiper 10 soon

[oalexdoda]

Great, thanks @nolimits4web ! Any breaking changes or things worth mentioning with v10?

[brianorwhatever]

@nolimits4web do you know what the issue is with this? would like to create a patch

[nolimits4web]

@nolimits4web do you know what the issue is with this? would like to create a patch

Issue is with Safari

[brianorwhatever]

3d effects in swiper element in safari will be fixed in swiper 10 soon

so no fix imminent unless Safari makes a change?

[nolimits4web]

https://swiperjs.com/blog/slide-slots-in-v10-1-0

[brianorwhatever]

hmm this is an elegant solution however it appears I can't use dynamic slot names, so I can't include my slide contents from a dynamic array of items.. Here is my code (Svelte) that is complaining with "slot attributes cannot have a dynamic value". Maybe there is a workaround I can't quite see..

{#each items as item, index (item.id)}
	<div slot={`slot-${index}`} class="w-full h-full relative">
		<svelte:component this={item.component} {...item.props} />
	</div>
{/each}

[nolimits4web]

@brianorwhatever it's better to ask in Svelte community, not related to Swiper

[brianorwhatever]

@nolimits4web I think this is web component related and not specifically svelte.. will ask around

[matekaszas13]

Hey, sorry for jumping in, I have the same issue with safari and translate 3d calculate the width wrong, I wanna use slideTo in a way, when user clicks on an item in the list of items in a row, The element jumps to the beginning of the row, It is working well in chrome but in safari the calculation is messed, any solution for it?

[oalexdoda]

I tried this but it still doesn't work in Safari (macOS Ventura) @nolimits4web :

Also, in the demo on the blog post there's a shadow issue:

[closca]

@brianorwhatever did you managed to find a workaround?

[brianorwhatever]

@closca no I didn't sorry

[closca]

@closca no I didn't sorry

Thanks mate. I ended up using core.
In my case I am on Angular. My solution was to let the angular render do his job and render an html block and then on the afterViewInit I am initializing Swiper with reference to the pre-build html block.

[jiggy1965]

I've got the solution but swiper.js should update their swiper-bundle.min.js file for this. I'm using Safari 17 on Ventura and have the same issue with 3d cubes in general. Turns out Safari on Ventura has a problem with sides that are exactly rotated 90 degrees. For those of you working on Ventura you'll probably won't see the left and right sides of this cube as well.

https://codepen.io/coder1965/pen/oNRggjb

Unless you turn all those 90deg and -90deg's to something other than exactly 90/-90. Like 90.01/-90.01. Then all sides appear again. There's a bug of some kind in Safari running on Ventura where when elements are exactly rotated 90 degrees Safari regards them as hidden afterwards.

In order for swiper.js to work the swiper-bundle.min.js file should be adjusted so that on every rotateX and rotateY something like an extra '0.01' should be added to the 'deg' value. It will still rotate the elements 90 degrees (as the browser will round the 90.01 down to 90), but Safari won't consider objects initially rotated 90.01 as hidden anymore.

Hopefully the swiper.js developers will pick up on this so our cubes will run normally again on Safari Ventura?

[jiggy1965]

#7532 (comment)

My updated swiper-bundle.min.js file is the fix. It adds '0.01' to every occurrence of rotateX and rotateY. The bug.zip file shows the current not working version for Safari/Ventura users. It uses the standard CDN. The fix.zip file uses the updated swiper-bundle.min.js file. Here on Ventura 13 all sides are visible as they should be.

[SandyWyper]

I had the same issue, even with latest version. The workaround in the blog didn't work for me in Astro - think that slot may be a protected term.

I did find, that if i gave the transform property on the slides a perspective(5000px) along with the others - that then safari will observe the z axis on the transform. I forked a copy of the repo and made this edit and it kinda works, but we lose the overlap between the slides. Is this in anyway helpful? I feel like this is close to a solution that I could do a PR for, but it's not quite there