Swiper cube sides hidden in Safari 17.1

[Beauseph]

Check that this is really a bug

• I confirm

Reproduction link

https://swiper-3d-pagination.uiinitiative.com/

Bug description

We've just updated to Safari 17.1 on macOS.
After updating, using the swipers cube effect, some sides do not display. From what i've seen, using a cube with 4 sides, the first and third show, the other ones don't, and sometimes they all appear to be experiencing some weird non-showing behaviour.

I did not fork, as the issue is also present in the demo. I am experiencing the same issues in my project.

Screen.Recording.2023-11-07.at.16.49.30.mov

Expected Behavior

I expect that all sides show as intended, when scrolling as well as using swipe gestures.

Actual Behavior

Some sides of the cube effect appear to render with a delay and often not show at all.

Swiper version

11.0.3

Platform/Target and Browser Versions

macOS Safari 17.1

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

[Beauseph]

Apologies if i made any mistakes in the report, this is the first time i post on github (:

[nolimits4web]

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

[Beauseph]

Hi @nolimits4web

I have tested across several versions of safari and mac OS, and with fix e005b69, it works on:

• MacOS Sonoma (14) with Safari 17.1
• MacOS Monterey (12) with Safari 17.1

However, it seems that it still doesn't work for MacOS Ventura (13) on Safari 17.1.

[nolimits4web]

Hi @nolimits4web

I have tested across several versions of safari and mac OS, and with fix e005b69, it works on:

• MacOS Sonoma (14) with Safari 17.1

• MacOS Monterey (12) with Safari 17.1

However, it seems that it still doesn't work for MacOS Ventura (13) on Safari 17.1.

Issue is not related to Swiper, you can open it in Safari tracker

[Beauseph]

Hi @nolimits4web,

Thank you for your reply.

So if i understand correctly it's a problem with that Safari / OS with handling certain CSS transformations?
Nothing that can be done about this either? May i ask you what you mean with Safari tracker?

Thanks for your time and endless efforts.

Best regards

[Beauseph]

Hi team,

fyi, a user reported that this issue is not only present in Safari but also when using the swiper in app (webview container, IOS).
Perhaps it's worth considering to make fix e005b69 apple / ios wide and not just for safari, as it seems to not just be contained to Safari.

Thanks for your consideration

[Beauseph]

following up on this as i think it's a possible solution for this problem.

[Beauseph]

following up on this problem again. this fix, if i understand correctly, should also be implemented to webview containers on IOS devices.

I think this would fix that issue:

[deniss-ee]

Issue is not resolved. If there are more than 4 slides and slider is looped, cube is still bugged on Safari.
Update: The bug is only reproduced when there are 5 slides. Fewer and more slides work fine