After spending the past few days working on a website, I just uploaded it and noticed some strange lines appearing at the top of images when scrolling. Any suggestions on how to fix this issue?
You can view the website here.
The images on the site are moving at different speeds using JQuery. Here is an example of the HTML for one of the images:
<div class="mountains1"></div>
Here is the CSS:
.mountains1 {
background: url(../img/mountains1.png) repeat;
background-size: cover;
width: 100%;
height: 800px;
position: absolute;
z-index: 13;
}
And here is the JavaScript:
var parallax = function(){
var $scrollY = $(window).scrollTop();
var $scrollX = $(window).scrollLeft();
$('.mountains1' ).css('top', '1640' -($scrollY * 1) + 'px');
}
$(document).ready(function(){parallax();});
$(window).scroll(function(){parallax();});
I am encountering this issue in Safari but not in Chrome. When I try using the `ceil()` or `round()` methods, it seems to break things.
These are the adjustments I made based on Leo's feedback:
var parallax = function(){
var $scrollY = $(window).scrollTop();
var $scrollX = $(window).scrollLeft();
var $scrollYint = Math.round($scrollY);
$('.cloudback' ).css('top', '-375' -($scrollYint * 0.4) + 'px');
// More changes made for other elements
}