9

I met very strange behavior on iOS Safari 7+

I'm using flexslider and for some reason it doesn't work when i click on a link and go to the page i use it. If i copy and paste the link in the address bar it works. Also it works on all other popular mobile browsers. Here is js i used to debug the issue:

if (!vertical || fade) {
    var $obj = (fade) ? slider : slider.viewport;
    var objHeight = slider.slides.eq(slider.animatingTo).height();
    console.log($obj.height());
    (dur) ? $obj.animate({"height": objHeight}, dur) : $obj.height(objHeight);
    if ($obj.height() == 0) { $obj.css("height", objHeight); }
    console.log(objHeight);
    console.log($obj.height());
    console.log($obj.css("height"));
}

Chrome logs expected values: 577, 187,187, 187px

But Safari logs very unusual values: 682, 195, 0, 0px

When i see the generated html it is absolutely same for the two browsers:

<div id="itemImgsContainer" class="flexslider singleSmoothHeight">
    <div class="flex-viewport" style="overflow: hidden; position: relative; height: 187px;">
        <ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="item flex-active-slide" style="width: 342px; float: left; display: block;"><img id="img_product_big_1085" itemprop="image" src="img_big.jpg" title="title" border="0" class="ui-corner-all"></li>
            <li class="item" style="width: 342px; float: left; display: block;"><img src="img1.jpg" title="mytitle" border="0" class="ui-corner-all"></li>
            <li class="item" style="width: 342px; float: left; display: block;"><img src="img2.jpg" title="title" border="0" class="ui-corner-all"></li>
        </ul>    
    </div>
    <ol class="flex-control-nav flex-control-paging">
        <li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li>
    </ol>
</div>

the difference is only in the height where Safari shows 195px instead. This happens only on iPhone Safari, and not any other popular browser.

Any help will be appreciated.

EDIT

After some experiments i found out that this happens only if i click on a tag that uses "flippable" efect. If i put on this a tag e.stopPropagation(); this issue disappears. I know that there is no logic for this behavior, because the issue is on another page than this, but these are the facts.

EDIT 2

Here is some more code that shows how flexslider is called:

$('.flexslider.singleSmoothHeight li:first-child').imagesLoaded(function() { 
        $(this).parents('.singleSmoothHeight').flexslider({ 
            animation: 'slide', 
            slideshow: false, 
            animationLoop: false, 
            directionNav: false, 
            smoothHeight: true 
        }); 
});

Here is a link with clip with the behavior in device simulator (iPhone 6+ in this case): http://bksito.com/aftco_iPhone_tests.avi

Note that the Safari is in device emulator mode in firsts steps, and last tests are on Safari emulator mode. I'm so confused why only on devices this behavior occurs.

10
  • Can you provide fiddle for it? Also, what is the jQuery version you are using?
    – Denis Ali
    Commented May 23, 2015 at 1:49
  • I tried with jQuery 8.1 and 11.1 I can't provide fiddle, but i can provide site if it necessary. guyharveysportswear.com
    – bksi
    Commented May 23, 2015 at 19:05
  • The workflow to lead to this issue is when you click to category and choose one of the products. If you put direct product link, then the issue doesn't exists. It only exists when you click on the product from category in grid view.
    – bksi
    Commented May 23, 2015 at 19:06
  • $ is not defined in console. stackoverflow.com/a/29729383/2025923 might help you
    – Tushar
    Commented May 24, 2015 at 5:49
  • Tushar, jQuery IS loaded beleive me. If you red the question you will notice that i'm actually using it to log the params. How it would log if it is not loaded?
    – bksi
    Commented May 24, 2015 at 11:22

1 Answer 1

1

When you have these kind of issue, the unique solution is to call all the jQuery functions using chain:

$(...).css( ... ).height( ... ).animate( ... ). ...;

Other solution is to use a timer setted to 0, in order to get the painter refresh the DOM.

$(...).css( ... );
setTimeout(function(){
   $(...).animate( ... );
},0);
1
  • .css was added by me to try to set the height other way than just .height without success anyway. So in flexslider you use .animate or .height, so i don't need chains here. In both cases Safari fails in circumstances i explained (see the edited question). Thanks for your time on this.
    – bksi
    Commented May 26, 2015 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.