Hi,
I am having a CSS-related issue on an iPhone. The background image doesn’t appear as I wish. Using my browser’s developer tools, the website appears fine.
I am wondering what you guys are using to debug CSS issues on mobile devices.
If you have a mac computer you can just plug your phone into the mac and then in safari open up the developer tools and you can select the device to debug live using devtools.
Another method I use is to get a codepen version working and then load the codepen on the phone and allows you to tweak the code quickly in codepen without having to keep uploading and changing the site etc. Obviously not ideal for large sites but for a bug such as a background you should be able to duplicate and upload a suitable version quickly.
If you are trying to use background-size:cover on the body then that doesn’t work on mobile.
I don’t have that.
If I can’t find a way I might try that.
Not on the body on a div. It looks fine on Android.
IOS doesn’t do background-attachment fixed unfortunately. It spreads it out over the whole body.
What you have to do is use an element that is position:fixed and then add a background image to that element and not use background-attachment fixed.
This codepen shows a method for multiple images based on using position:fixed whicch shows it does work on the iphone.
https://codepen.io/paulobrien/pen/qoJzqW
A simpler one image version is shown here:
https://codepen.io/paulobrien/pen/nJVqLG
Maybe you can adapt your slider to apply the image to viewport height position:fixed element instead.
As my background image was loaded from the client, adapting my script and adding some CSS did the trick
$(document).ready(function () {
// Parse the image arrays from hidden fields
const largeScreenImages = JSON.parse(document.getElementById('<%= hfLargeScreenImages.ClientID %>').value);
const smallScreenImages = JSON.parse(document.getElementById('<%= hfSmallScreenImages.ClientID %>').value);
let isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
let imageArray = isSmallScreen ? smallScreenImages : largeScreenImages;
let currentIndex = 0;
// Get the target element
const wrapSlider = document.getElementById("wrapSlider");
// Check if it's an iOS device
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Apply iOS-specific CSS fix
if (isIOS) {
// Add a class to handle iOS differently via CSS
wrapSlider.classList.add('ios-device');
}
}
// Function to update the background image
function updateBackground() {
wrapSlider.style.backgroundImage = `url('${imageArray[currentIndex]}')`;
currentIndex = (currentIndex + 1) % imageArray.length; // Cycle through images
}
// Set the interval to change background every 30 seconds
updateBackground(); // Initial update
setInterval(updateBackground, 30000);
// Listen for screen size changes and update images dynamically
window.matchMedia("(max-width: 768px)").addEventListener("change", function (e) {
isSmallScreen = e.matches;
imageArray = isSmallScreen ? smallScreenImages : largeScreenImages;
// Restart the cycle with the new image array
currentIndex = 0;
updateBackground();
});
});
And I added this CSS
/* Default setting for most devices /
.slider.home1 .wrap-slider {
position: relative;
background-attachment: fixed;
}
/ iOS-specific override */
.ios-device.wrap-slider {
ba
1 Like