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

[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.