3d Cube hides slides on Safari for Mac Ventura
jiggy1965 opened this issue · comments
Check that this is really a bug
- I confirm
Reproduction link
https://swiperjs.com/demos/230-effect-cube/core
Bug description
On Safari for Mac the cube doesn't work. Only the front and back side of it are visible and not the left and right side. This is because of the 90 degrees rotation. When an element is rotated exactly 90 degrees Safari on Ventura regards it as invisible and won't show it when it is animated. This is some kind of bug in Safari on Ventura specifically (Safari on other OS's work normally), but can be fixed.
In order for swiper.js to work the CDN swiper-bundle.min.js file should be adjusted so that on every rotateX and rotateY something like an extra '0.01' is 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. As long as the deg value isn't exactly 90, otherwise Safari hides it.
Expected Behavior
I should see all sides of the cube
Actual Behavior
Only the front and back slide of the cube are visible
Swiper version
11.1.3
Platform/Target and Browser Versions
Safari 17 on OSX Ventura
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
Safari 17 on Sonoma can't see any issues
Safari 17 on Sonoma can't see any issues
Yes, my point exactly. It only happens on Safari on Ventura. When 3d cubes like these using swiper.js are viewed on Ventura you'll see missing sides like in this sample:
It's an issue only effecting Ventura users where elements rotated exactly 90 degrees are from then on regarded as hidden. It's easily fixed by having the CDN swiper-bundle.min.js file use 90.01deg for such rotations instead of 90deg. The effect will be the same with the element beging rotated 90 degrees, but because it is set to rotate 90.01 Safari on Ventura won't consider the element hidden from then on and they will appear when the cube is rotated as usual.
I could update to Sonoma of course, but I guess you would also want to keep the swiper.js library available and working for Ventura users or for those who don't wish to update to Sonoma just yet :-)
We already do it in code (if you check) but we check for safari < 16.2 where this issue was present. Not sure how to detect the case for Ventura-only and not sure if it is actually needed
I'm using Safari 17.4.1 on Ventura 13.6.6 and the issue was still there. As you can see by attached screen recording. I also added two demo files. The one in the 'bug' folder is using the standard CDN at https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js.
The 2nd in the 'fix' folder: here I downloaded above swiper-bungle.min.js file and changed it. Notice how I added '0.01' to all occurrences of rotateX and rotateY. To make sure that a rotation of exactly 90deg isn't done, but one of 90.01 instead. When I use this demo all sides of the cube are visible. If you replace the CDN file with that in the 'fix' folder us Ventura users should see the cube working again.
bug.zip
fix.zip
https://github.com/nolimits4web/swiper/assets/45363538/683c4d03-36d8-477f-9afe-eca0d51533f1