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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With