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、187像素

但 Safari 会记录非常不寻常的值： 682、195、0、0像素

当我看到生成的 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);