Encountering a strange issue where the <body> tag is wider than my monitor, even though it shouldn't be. I have implemented some JavaScript to create a parallax effect by adjusting the background based on scroll offset. However, when the background is set to 100% width, it abruptly snaps and stretches out. This can be observed by zooming out of the page, causing the background to appear larger.
Visit the website here
Can anyone identify what might be going wrong with this setup? The provided JavaScript code is below, and feel free to inspect the CSS for additional details. Additionally, there seems to be a noticeable slowdown in performance compared to when everything was running smoothly.
var ismobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!ismobile){
window.onresize = function(event) {
//Detect window size and adjust padding accordingly
if (window.innerWidth > 835) {
var newPadding = parseInt(window.innerHeight)/2.8;
newPadding = newPadding.toFixed(0);
var limitPadding = 221;
//Apply new padding value to header
if (newPadding > limitPadding) {
doc("header").style.padding = newPadding + "px 0px";
}
}
};
window.onscroll = function() {
var speed = 0.7;
var newPos = "100% " + (window.pageYOffset * speed) + "px";
document.body.style.backgroundPosition = newPos;
};
}