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

Posted 2023-03-14

【中文标题】jQuery .height 方法无法在 iOS Safari 中设置高度

【英文标题】：jQuery .height method fails to set height in iOS Safari

【发布时间】：2015-05-19 01:13:43

【问题描述】：

我在 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 模拟器模式下。我很困惑为什么只有在设备上才会出现这种行为。

【问题讨论】：

你能提供小提琴吗？另外，您使用的 jQuery 版本是什么？

我尝试使用 jQuery 8.1 和 11.1 我无法提供小提琴，但如果有必要我可以提供网站。 guyharveysportswear.com

导致此问题的工作流程是当您单击分类并选择其中一种产品时。如果您放置直接产品链接，则问题不存在。它仅在您从网格视图中的类别中单击产品时才存在。

$ is not defined 在控制台中。 ***.com/a/29729383/2025923 可能会帮助你

Tushar，相信我已经加载了 jQuery。如果您将问题涂红，您会注意到我实际上是在使用它来记录参数。如果没有加载它会如何记录？

【参考方案1】：

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

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

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

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

我添加了

.css 以尝试以其他方式设置高度，而不仅仅是 .height ，但无论如何都没有成功。所以在 flexslider 中你使用 .animate 或 .height，所以我在这里不需要链。在这两种情况下，Safari 在我解释的情况下都会失败（请参阅编辑后的问题）。感谢您抽出宝贵时间。