jQuery .height方法无法在iOS Safari中设置高度

Question

我在iOS Safari 7+上遇到了非常奇怪的行为

我正在使用flexslider,由于某种原因,当我点击一个链接并转到我使用它的页面时,它不起作用.如果我复制并粘贴地址栏中的链接,它的工作原理.它也适用于所有其他流行的移动浏览器.这是用于调试问题的js:

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记录的预期值:577,187,187,187px

但Safari会记录非常不寻常的值:682,195,0,0px

当我看到生成的html时,两个浏览器完全相同:

<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>

区别仅在于Safari显示195px的高度.这只发生在iPhone Safari上,而不是任何其他流行的浏览器.

任何帮助将不胜感激.

编辑

经过一些实验,我发现只有当我点击a使用"可翻转"效果的标签时才会发生这种情况.如果我加上这个a标签,e.stopPropagation();这个问题就会消失.我知道这种行为没有逻辑,因为问题出在另一个页面而不是这个,但这些都是事实.

编辑2

这里有一些代码显示了如何调用flexslider:

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

以下是带有剪辑的链接,其中包含设备模拟器中的行为(本例中为iPhone 6+):http: //bksito.com/aftco_iPhone_tests.avi

请注意,Safari在第一步中处于设备模拟器模式,最后一次测试在Safari模拟器模式下.我很困惑为什么只在设备上出现这种行为.

Answer 1

当您遇到此类问题时，唯一的解决方案是使用链调用所有 jQuery 函数：

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

其他解决方案是使用设置为 0 的计时器，以便让画家刷新 DOM。

$(...).css( ... );
setTimeout(function(){
   $(...).animate( ... );
},0);