search

malsup / cycle2

2nd gen cycling
899 stars 239 forks source link

iOS - iframe visibility issue #797

Open AScottishManc opened 7 years ago

AScottishManc commented 7 years ago

There is currently a known issue with iOS that has visibility:hidden doesn't work. I came across this issue while adding iframes (YouTube) to a carousel.

Scenario I include a title to the slide. Sometimes the title is on multiple lines on mobile. Meaning that the video are not always aligned.

When the current slide is showing, the video for the another slide still appears behind it. Due to the alignment difference, the issue becomes more apparent: image

Solution I have noticed that the coding adds both an opacity and visibility, although when then the slide is not active, the opacity still remains at 1. Updating this to 0 resolves the issue from iOS:

if ( isAfter && opts.hideNonActive ) opts.slides.filter(':not(.' + opts.slideActiveClass + ')').css({ 'visibility': 'hidden', 'opacity': '0' });

michellekb commented 7 years ago

This fix is good. Issue isn't only on iOS, but also MacOS Safari. Plugin seems abandoned, so just a note for others troubleshooting this problem; the lines to replace with @Scottish1977's code are 531-532 in jquery.cycle2.js for Cycle2 v2.1.3 (which is what is in my codebase and I have tested), and it looks like lines 538-539 in jquery.cycle2.js for Cycle2 v2.1.6 (latest version, which I have not tested).