Swiper Slide CSS Issues With CubeEffect

aagam29 commented 3 years ago

Check that this is really a bug

[X] I confirm

Reproduction link

https://github.com/aagam29/swiper-core-bug-repro

Bug description

First of all thanks for this awesome library. So I wanted this really cool cube effect for a project, I had used Vue 2.0 with my project, Since swiper did not have support for Vue 2.0 components, I decided to go ahead with Swiper Core.

After Integrating everything, I realized there are two Issues with the Cube Effect.

BUG 1 I've set the autoplay to true, there is a glitch after each rotation that makes some icons disappear for a while, which makes it kind of unusable and buggy.

BUG 2 I have some cards which with tooltips on hover which work fine when used individually, but when used with the cube effect the hover/tooltips get weird and messy as well.

The reproduction repo might make things much clear for you. git clone --> yarn install --> yarn serve.

Also, bug1 was around for some time and I had moved on to cope up with it, But then recently for some reason, I don't know how BUG 2 came up, and my feature broke which was working completely fine earlier and now I can't reproduce the working version one way or another.

Swiper Version: 6.8.1 Vue Version: 2.6.11 Vuetify Version: 2.4.0

Also, There is another CSS issue that happens when I turn on/off dark mode in my original project.

However for the time being, can you please look into the reproduction repo for bug 1,2 and do something about this?

Thanks in advance.

Expected Behavior

Internal CSS and Structure of components should be preserved.

Actual Behavior

Glitchy, Weird Icons & Hover Effect

Swiper version

6.8.1

Platform/Target and Browser Versions

Windows 10 | Chrome Version 94.0.4606.54 (Official Build) (64-bit)

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

[X] I'm willing to open a PR

nolimits4web commented 3 years ago

The bugs you described is how CSS 3D works in general. The flashing elements happens due to browser bugs, as they treat perspective differently, you can try to play with translateZ on those elements. Same with tooltip, it is due to shifted perspective.

Closing as not really a Swiper's issue

aagam29 commented 3 years ago

Huff, I tried a lot, hover just doesn't work normally on the 3D cube, I'll probably have to drop the feature.

nolimits4web / swiper