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上，而不是任何其他流行的浏览器。

任何帮助将不胜感激。

修改

经过一些实验后，我发现只有当我点击使用＆＃34; flippable＆＃34;的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函数：

  TMyWindowDelegate = class(TOCLocal, NSWindowDelegate, NSWindowDelegateEx)
  // ...
  end;

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

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

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

1 个答案: