Greetings! I have been working on developing a parallax website, and everything seems to be running smoothly across all browsers except for iPad. It appears that the background-size: cover property is not functioning properly on this device.
Below is the snippet of my code:
$(document).ready(function(){
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // storing the object
$(window).scroll(function() {
// Calculate final background position
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});#section1 {
background: url(images/hlfs-image.jpg) 0% 0% no-repeat fixed;
min-height: 1000px ;
height: 1000px ;
margin: 0 auto ;
width: 100%;
max-width: 1920px ;
position: relative ;
background-size:cover ;
}<section id="section1" data-type="background" data-speed="10" class="pages"> </section>If anyone has a solution to this issue, I would greatly appreciate your input!
Thank you.