Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swiper cube sides hidden in Safari 17.1 #7167

Closed
5 of 6 tasks
Beauseph opened this issue Nov 7, 2023 · 11 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests
Closed
5 of 6 tasks

Swiper cube sides hidden in Safari 17.1 #7167

Beauseph opened this issue Nov 7, 2023 · 11 comments · Fixed by Mapuppy09/tradetrust-website#8 · 4 remaining pull requests

Comments

@Beauseph
Copy link

Beauseph commented Nov 7, 2023

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
Copy link
Author

Beauseph commented Nov 7, 2023

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

@nolimits4web
Copy link
Owner

@Beauseph
Copy link
Author

Beauseph commented Nov 9, 2023

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
Copy link
Owner

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
Copy link
Author

Beauseph commented Nov 9, 2023

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
Copy link
Author

Beauseph commented Nov 23, 2023

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
Copy link
Author

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

@Beauseph Beauseph mentioned this issue Nov 28, 2023
@Beauseph
Copy link
Author

Beauseph commented Dec 1, 2023

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:
image

nolimits4web added a commit that referenced this issue Feb 5, 2024
@deniss-ee
Copy link

deniss-ee commented Feb 13, 2024

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment