Fixed element not being centered by jquery on Safari

Question

I have 3 elements that are supposed to be centered by jQuery upon page load. Currently, only 2 of the elements are centered correctly by Safari on desktop and mobile. #pulse_ball is the element that is not being positioned correctly; it gets a left style of -0.5px for some reason. After resize, however, all 3 elements are centered correctly. Also (on iPhone) in portrait mode the elements get centered correctly after a scroll, but not in landscape mode.

jsFiddle example

CSS for #pulse_ball:

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

CSS for #center_line:

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

CSS for #arrow_down:

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

JS code:

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

Seems to be a css calc() problem, try setting only left: 50% for the #pulse_ball elememnt. Here is the fork working.