Slider div causing iOS error
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

The site www.cinemaeosblog.com has a slider in the header.php with the code to call it
<?php echo do_shortcode('[wooslider slider_type="slides" slider_page="main-page-slider" animation="slide"]'); ?> placed just after the bit that says <div id="page" class="clearfix hfeed"> in the header.php

With the slider in this position, the functionality of the slider is correct but it's impossible to get desired layout since the slider is responsive and set to adjust to the width of it's container which in this case is the page.

In order to try to solve this problem I moved the code to call the slider above the <div id="page" class="clearfix hfeed"> and added <div class="slider"> above that. I then defined the slider class in the style.css with .slider {display: block; margin: 0 auto;max-width: 1050px;padding: 0 0px;}

You can see the result of this by visiting shuttermuse.com/test

Now this is exactly how I want the slider to look. For a couple of days I left it like that thinking it was fine. It works in firefox and Safari when testing on my Mac. But then yesterday I looked at it on iPhone and iPad. The styling is maintained on those two devices but every time the slider slides across the screen all the other elements on the page flash, as if they are being forced to re-load or something like that. If you set the slider style to 'fade' it does not do this so I think that the problem has something to do with the underlying way in which flexsliders sizing works. I don't really understand it myself but I've seen weird things when using firebug to examine the page whilst a slide is 'in motion'. Almost as if the slider preloads the image out to the side and then drags it across the page. Hard to describe, but visible when inspecting.

awarded to skram

Crowdsource coding tasks.

1 Solution

Winning solution

Just a quick idea - try adding -webkit-backface-visibility: hidden to your .slider CSS per https://github.com/woothemes/FlexSlider/pull/44

Two other sources: https://github.com/woothemes/FlexSlider/issues/126 and https://github.com/woothemes/FlexSlider/issues/45 though it seems in all cases the bugs were supposedly fixed a while ago.
skram over 9 years ago
I saw that last night when I was searching , but I looked in the flexslider.css and the line is already in there. It's really the only mention I could see of a similar problem. line 25 " .wooslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ It does seem like this could be related in some way..... what have I added that is overriding this maybe ?
Whistlerdan over 9 years ago
AHa! Got it. You're right. What I hadn't done was try adding that code to my .slider CSS I just verified that it was in the flexslider.css Works now :)
Whistlerdan over 9 years ago
:) glad this fixed it for you
skram over 9 years ago