Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery .height method fails to set height in iOS Safari

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.

like image 823
bksi Avatar asked May 19 '15 01:05

bksi


1 Answers

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);
like image 97
Luca Colonnello Avatar answered Oct 31 '22 17:10

Luca Colonnello