javascript - 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);