Swiper.js coverflow rendering issue
Hey friends, i was wondering if anyone had encountered a weird behaviour while using swiper.js coverflow.
Here's a loom of the issue
https://www.loom.com/share/03e48ded038941228f6a34dcac3f7349?sid=776de5cd-695b-4c30-8011-3452d8f1e6d6
and a read-only of my project.
https://preview.webflow.com/preview/wizard-landing-staging?utm_medium=preview_link&utm_source=designer&utm_content=wizard-landing-staging&preview=e46601429537bf9d6516f7c46ab6abe4&locale=en&workflow=preview
Let me know if someone has seen this before!
Thanks in advance
17 Replies
Hey Maggy! Do you have a link to the live site as well to see the rendering? (If you can share it, if not no worries)
Alright I've been going over this, still trying to find what's causing the problem but it only seems to be happening in chrome based browsers for me (in safari it's working great), so interested if anyone has found something similar in the past using swiper because I know most of us webflow devs are using chrome.
I have a feeling it might be something to do with the drop shadows but not 100%
oh i havent tested without the drop shadow.
Although i've been testing without the phone and messages sliders, just the coverflow slider (the rotation of images in the background) and that seems to be where the problem is
So if you have just that one slider on the page and not the overlapping ones, it's still having those display issues? I thought it was maybe the drop shadow from the overlapping sliders causing graphical issues
Even still the issues I've been seeing aren't as bad as yours either, just slight image clipping, I'll record a loom so you can see it
ya... super weird. I had it working at some point so im just gonna slwoly rebuild it and test at every step to figure out where it went wrong. just so much extra time....
That's how I'm seeing it in chrome, not as harsh as your loom but obviously still not ideal
so weird eh....
Yeah, weirder that it's not an issue in safari too, which is where the issues usually come up π
so close to QA... Dayum π
I'll let you know what it was once i figure it out
ya, they're trading spots as buggy browsers today. might do a bit of research based on that though
I'll keep looking too to see if I can find anything that might help! (Awesome job on the dev by the way)
thanks, this one has a very fun set of puzzles on every section
I figured out what's causing it, but I'm not sure how to fix it haha.
On the navbar_component class, the position fixed is causing the issues for me, soon as I turned that off it was fine, obviously that's not ideal because you don't see the navbar anymore though
oh really? that's kinda weird. why would it affect that slider. i'll go test it though
The issues start just before the navbar starts to overlap the slider so I think it's some kind of z-index or positioning issue, trying all kinds of things but no luck yet
tim ricks was saying it might be a z-index issue somewhere. but ya, that makes it way better for some reason. I see it if i scroll back up suuuuper fast but it is gone otherwise. π€
gona keep diggin after lunch
Alright so... Adding this weird fix here in case someone looks for this bug in the forum:
Issue: Conflict between a fixed element (navbar in this case) going over a Swiper slider with the 'coverflow' option
Fix: Giving some transparency to the fixed element gets rid of the glitch. Something like 99.5% transparency makes it look like there's no transparency. (Webflow doesnt do transparency decimals well so it needs to be a little css snippet).
I'm not sure what the rational is here, but the glitch is gone... π€·ββοΈ