[v8] Swiper 3D Cube and 3D Coverflow effects demos in KS are not working properly

framework7io / framework7

Full featured HTML framework for building iOS & Android apps

http://framework7.io

MIT License

18.04k stars 3.23k forks source link

[v8] Swiper 3D Cube and 3D Coverflow effects demos in KS are not working properly #4155

Closed DAnn2012 closed 1 year ago

DAnn2012 commented 1 year ago

Framework7 version: 8.0 beta 2 to 8.0 beta 9
Platform and Target: iOS and MD themes tested on Safari 16.4 (17615.1.26.101.9, 17615) - macOS Monterey 12.6.4 (21G526)

Describe the bug

The Swiper 3D Cube and 3D Coverflow effects demos in KS are not working properly (Framework7 8.0 beta 2 to 8.0 beta 9)

Screenshots

Istantanea 2023-03-31 alle 13 10 26

Istantanea 2023-03-31 alle 13 11 04

nolimits4web commented 1 year ago

Maybe cache? Works for me in Safari 16.3

DAnn2012 commented 1 year ago

Hi @nolimits4web

I thank you for the answer.

I found out that the problem was caused by having the experimental features CSS 3D Transform interoperability turned on in Safari's Develop menu.

By disabling this feature everything became normal.

The strange thing is that with Framework7 7.1.5 and 8.0 beta 1 (which include the old version of Swiper) and with the demos published on the Swiper site (new version)

https://swiperjs.com/demos#effect-cube

https://swiperjs.com/demos#effect-coverflow

The defect does not occur even with that feature active.

Thank you.

DAnn2012 commented 1 year ago

Hi @nolimits4web

Even the recent Safari 16.4.1 update (and the following Safari 16.5 and Safari 16.5.1 updates) by default has the experimental features CSS 3D Transform interoperability active in Safari's Develop menu and doesn't make the two effects 3D Cube and 3D Coverflow of Swiper included in Framework7 v8.x work well.

By disabling this feature everything goes back to normal.

Thanks.

DAnn2012 commented 1 year ago

With the release of Swiper 10.0.3 (which is included in Framework7 version 8.2.0) I did more tests with the demos posted here:

https://swiperjs.com/demos#effect-cube

https://swiperjs.com/demos#effect-coverflow

And I checked that:

with the Core, React and Vue versions everything works correctly both with the CSS 3D Transform interoperability feature enabled and disabled
Element versions only work with CSS 3D Transform interoperability disabled, otherwise they have the same problem as in Framework7

nolimits4web commented 1 year ago

Yes, and it is issue with Safari, no ways to fix it at the moment. Use core version of Swiper instead