javascript - Fixed element not being centered by jquery on Safari -
i have 3 elements supposed centered jquery upon page load. currently, 2 of elements centered correctly safari on desktop , mobile. #pulse_ball
element not being positioned correctly; gets left
style of -0.5px
reason. after resize, however, 3 elements centered correctly. (on iphone) in portrait mode elements centered correctly after scroll, not in landscape mode.
css #pulse_ball:
#pulse_ball { display: block; position: fixed; left: calc(50% - 27px); z-index: 25; top: 48%; }
css #center_line:
#center_line { width: 3px; background: #dbdbdb; margin: 0 auto; position: fixed; z-index: 0; }
css #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)}); }
seems css calc()
problem, try setting left: 50%
#pulse_ball
elememnt. here fork working.
Comments
Post a Comment