coverflow mobile safari css rendering issues

MichaelRando commented 6 years ago

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)
Swiper Version: 4.2.2.
Platform/Target and Browser Versions: IOS mobile safari 11.3 parameters: const params = { centeredSlides: true, effect: 'coverflow', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true }, height: tableHeight, initialSlide: this.props.centerAt || Math.floor(this.props.cards.length / 2), navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, grabCursor: true, slidesPerView: 'auto', simulateTouch: true, spaceBetween: -30, roundLengths: true // rebuildOnUpdate: true }

What you did

I use 3d cover flow to swipe between a few slides.

Expected Behavior

It should work the same as a the demos on the site.

Actual Behavior

Between 4.1.6 and 4.2.2 the coverflow effect got broken. I've been locked to 4.1.6 ever since my testers started bugging the swiper carousels on mobile safari. (other browsers are still ok) The cards appear offset and rotate incorrectly on swipe.

nolimits4web commented 6 years ago

Related to #2598?

MichaelRando commented 6 years ago

I don't think so. It's completely safari dependent; so it's a browser rendering difference somewhere. Tested 4.2.5 just now. Still looks goofballs.

nolimits4web commented 6 years ago

Live example or fiddle with the issue would be great as i can't replicate it

MichaelRando commented 6 years ago

I started working on the repro, based on your own examples. But then it did repro for me on the device I have here, when used on: http://idangero.us/swiper/demos/240-effect-coverflow.html Do you have any ios test devices? It's not happening in a desktop safari.

MichaelRando commented 6 years ago

sometimes it works. Load timing issue? resize happening? Tried switching to landscape and refreshing the page?

nolimits4web commented 6 years ago

this demo doesn't use latest swiper version

MichaelRando commented 6 years ago

it's broken in versions greater than 4.1.6. This demo uses a version greater than 4.1.6

nolimits4web commented 6 years ago

I am asking the same, can you please provide live example or fiddle with the issue using latest 4.2.5+ version?

MichaelRando commented 6 years ago

I would like to. Please note that I observed the broken behavior on your own demo; so making another demo that reproduces the same is not my favorite task of the day. I suspect it's a test environment issue with respect to resize or initialization timing, based on my observation that it's not always broken, but one can usually refresh until achieving a broken state.

nolimits4web / swiper