Question

以下JavaScript / jQuery代码是jQuery插件“嵌套”的一部分，它创建了1x1,2x1,1x2,2x2对象的无间隙网格（在我的情况下为div s，带有背景图像）。

然而，在Safari 9或更早版本以及iOS中，绝对定位的图像div在计算所有内容后不会移动到其网格位置，而是保持在位置0 | 0，相互重叠。在控制台记录大量变量之后，我在计算过程的早期就将问题转移到了这些代码行：

$(this).css({
    'display': display,
    'background-size': 'cover',
    'background-position': 'center',
    'background-image': currImage,
    'position': 'absolute',
    'background-color': '#eeeeee',

    'width': currWidth + 'px',
    'height': currHeight + 'px',

    'overflow': 'hidden',
    'top': $(this).position().top,
    'left': $(this).position().left
});

curWidth和curHeight是根据每个image-div上的数据属性，单元格大小和宽高比计算得出的。此计算适用于所有经过测试的浏览器，所以一切都很好。然而，在上述css分配之后，width的{{1}}和height值仍然在Safari或iOS上$(this)。在其他浏览器上，正确分配了这些宽度和高度值。使用0px或$.width()时，问题仍然存在。其他CSS属性（如background-image）在Safari中正确分配。

可能有趣的是，container-div的HTML是从AJAX响应生成的，因此使用jQuery动态地添加到DOM中。

奇怪的是，当通过windows-resize触发插件resize-function（它简单地重新运行与插件初始化完全相同的过程）时，所有值都被正确分配，并且网格突然呈现并在有问题的浏览器中工作。

事件链如下：

文件载入
$（document）.ready - ＆gt; AJAX致电
AJAX.complete：创建图片库（容器）标记
预加载所有图片
预加载完成：在容器

你知道为什么Safari 9及更早版本在插件初始化时为div分配宽度和高度失败了吗？提前感谢您的帮助！

jQuery很容易在iOS / Safari中设置CSS宽度和高度

0 个答案: