javascript - 固定元素在 Safari 上没有被 jquery 居中

Question

我有 3 个元素应该在页面加载时由 jQuery 居中。目前，Safari 在桌面和移动设备上只有 2 个元素正确居中。 #pulse_ball 是未正确定位的元素；由于某种原因，它的 left 样式为 -0.5px。然而，调整大小后，所有 3 个元素都正确居中。此外(在 iPhone 上)在纵向模式下，元素在滚动后正确居中，但在横向模式下则不然。

jsFiddle example

#pulse_ball 的 CSS:

#pulse_ball {
    display: block;
    position: fixed;
    left: calc(50% - 27px);
    z-index: 25;
    top: 48%;
}

#center_line 的 CSS:

#center_line {
    width: 3px;
    background: #dbdbdb;
    margin: 0 auto;
    position: fixed;
    z-index: 0;
}

#arrow_down 的 CSS:

#arrow_down {
    display: block;
    width: 64px;
    position: fixed;
    bottom: 10%;
    left: calc(50% - 32px);
}

JS代码:

centerItems();

$(window).resize(function() {
    centerItems();
});

function centerItems() {
    $("#center_line").height($("body").height());
    $("#center_line").offset({left: ($("body").width() / 2) - 1});
    $("#pulse_ball").offset({left: ($("body").width() / 2) - ($("#pulse_ball").width() / 2)});
    $("#arrow_down").offset({left: ($("body").width() / 2) - ($("#arrow_down").width() / 2)});
}

Answer 1

似乎是 css calc() 问题，请尝试为 #pulse_ball 元素仅设置 left: 50%。 Here fork 在工作吗？