Reopening ticket to closed thread re fixed backgrounds on ipad not displaying

[goldengate415]

RE support post:

Problem displaying color sections with “fixed” backgrounds on iPad

Hi again Ismael,
I just visited this page and the fix, which I remember working, is no longer working:
https://www.thomashenthorne.com/125-belvedere-ave-belvedere-ca/

Here’s the css – can you tell me if I did something wrong?

/** Ismael fix color sections on iPad1481601 **/
@media only screen and (max-width: 1024px) {
/* Add your Mobile Styles here */
.avia_mobile .avia-full-stretch {
background-attachment: scroll !important;
}

.avia-bg-style-fixed {
background-attachment: scroll !important;
}
}

Thanks,
Rob

[goldengate415]

I just realized that the reason I thought this was fixed is because it is fixed on Chrome on the ipad. However, on Safari, it does not fix the issue. I chatted with GPT and Gemni, and the latter came up with this which doesn’t work either:

/**
* Consolidated iPad Background Image Fixes – Attempt 2
*/

/* Target iPads (both portrait and landscape) */
@media only screen and (max-width: 1024px) {
.avia_mobile .avia-full-stretch,
.avia-bg-style-fixed {
background-attachment: scroll !important;
}
}

/* Specific fix for Safari on iPad in landscape mode */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
.avia-bg-style-fixed {
background-size: cover !important;
background-position: center center !important;
background-attachment: scroll !important; /* Ensure it’s still scrolling */
}
}

Gemni also recommended I do a solution with javascript but I’m not wanting to start adding custom js to the site.
`<script>
(function($) {
$(window).on(‘orientationchange’, function() {
if (window.innerWidth >= 768 && window.innerWidth <= 1024 && Math.abs(window.orientation) === 90) {
// Force a repaint/reflow on iPad landscape after orientation change
$(‘.avia-bg-style-fixed’).each(function() {
$(this).css(‘background-image’, $(this).css(‘background-image’));
});
}
});
})(jQuery);
</script>

If we can’t fix it, is there a way to make Safari only show the portrait orientation (which are smaller, mobile photos) vs the landscape, while Chrome would still use the larger color sections / background photos in landscape mode?

Sorry this one is a beast…

Thanks
Rob

[Author]

Posts