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

[Ismael]

Hi,

Thank you for the inquiry.

Would you mind providing a screenshot? As mentioned in the previous thread, this is a known issue on iOS devices, so disabling the fixed background effect is recommended. Have you tried removing the selector “.avia_mobile”? You can also try setting the “background-size” property from “cover” to “contain”.

Best regards,
Ismael

[goldengate415]

I have not removed that selector. I am a css novice. Should I try that, and how would the code change?

Here are the images:
https://postimg.cc/gallery/c3Pxc4Q

As you can see, the fixed background images look like highly zoomed in portions of the photos. Of course on Chrome there is no issue at all. i realize there is a Safari / ios limitation, just need to figure out how to convert these to scroll if possible. I know I can’t do a fixed background.

Many thanks,
Rob

[Ismael]

Hi,

Thank you for the screenshots.

Yes, you can try removing the selector “.avia_mobile” selector and set the background-size property to contain.

@media only screen and (max-width: 1366px) {
  /* Add your Mobile Styles here */
  .avia-full-stretch, .avia-bg-style-fixed  {
      background-attachment: scroll !important;
      background-size: contain !important;
  }
}

We would like to check the site but it is currently inaccessible on our end. Do you have a staging version of the site without cloudflare?

Best regards,
Ismael

[goldengate415]

Hi Ismael,
Are you getting a cloudflare error? I have turned off Geoblocking there but I think WP Engine has some geoblock rules in place because we had a bot attack a few months ago.

I’m on a trip without my iPad so I can’t check this weekend but please keep this thread open and I’ll test it as soon as I can.

Best,
Rob

[Ismael]

Hi,

Yes, we’re getting an error from cloudflare. Let us know once the site is available — we’ll keep the thread open.

View post on imgur.com

Best regards,
Ismael

[goldengate415]

see private content

[Ismael]

Hi,

Please check the private field.

Best regards,
Ismael

[goldengate415]

please see private content

[Ismael]

Hi,

We couldn’t reproduce the issue using a Safari emulator. Another workaround we recommend is to duplicate the color section, set the background attachment to “scroll”, then control the visibility of each section under Advanced > Responsive > Element Visibility settings. The idea is show one color section on desktop and another on mobile or smaller screens with a different background configuration.

Best regards,
Ismael

[goldengate415]

Hi Ismael,
Thanks for your patience and hard work on this! The latest code snippet above definitely helped and there are no longer the huge “zoomed in” images on the fixed images on iPad Safari. Is there any way you can access a VPN so you can see the page?
One thing that’s funny is that the images now display, but they are just a little smaller than the other images (that are set to scroll, not fixed) and so there’s a little white border next to them. Definitely better but if there’s a slight tweak to get them to stretch we would be 100%.

Thanks,
Rob

[Ismael]

Hi,

The images are smaller because they are constrained within the section area using the css rule “background-size: contain !important;”. You can try changing it back to “cover”, but this may cause the “zoomed-in” issue to return.

Try this css code in place of the recent one, then make sure to purge the cache or clear your browser history.

@media only screen and (max-width: 1366px) {
  /* Add your Mobile Styles here */
  .avia-full-stretch, .avia-bg-style-fixed  {
      background-attachment: scroll !important;
      background-size: cover !important;
  }
}

Best regards,
Ismael

[goldengate415]

Ismael, well done! I think you solved it!!!! Thank you so much for your perseverence on this one! The images look great on the ipad in both landscape and portrait. (In portrait I actually switch to photos scaled for mobile.)

Can we leave this thread open for a week so I can keep testing?

Thank you so much!!!!!
Rob

https://www.thomashenthorne.com/125-belvedere-ave-belvedere-ca/

[Ismael]

Hi,

Good to know! Glad it’s working. We’ll keep the thread open.

Best regards,
Ismael

[Author]

Posts