Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 18, 2025 at 4:16 pm #1481601
    goldengate415

    Hi all, It’s been a while since I’ve had an Enfold question. i hope this finds you all well. On our property pages for homes for sale, we use the photo element for mobile, and then for desktop we use a color section with a background image that fills the screen. It provides a beautiful immersive effect, an d under “background attachment” setting I use “scroll” and “fixed” settings.

    For the fixed setting, it provides a really cool effect where the photos appear from the bottom of the screen and cover the one in view. It looks great on desktop I think. We just discovered that if you view these pages on an ipad in landscape mode, the color sections with the fixed backgrounds are highly distorted and the photo does not display. You can see an example of this here:

    https://www.thomashenthorne.com/6-bay-laurel-lane-san-rafael/

    Questions:
    1. Is this a bug that can be fixed? Or perhaps Apple has updated their ios and Enfold needs an update to match their changes?
    2. If not and this is native to Apple, is there a way to keep the “fixed” on desktop but switch to “scroll” on iPad without messing up how it works on mobile (which is just photos, no color sections)? I don’t want to ruin the desktop experience just for iPads in landscape if I don’t have to.

    I seem to recall that this worked fine in the past but frankly I don’t use my iPad very much so I could be wrong.

    Thanks,
    Rob

    April 21, 2025 at 6:25 am #1481693
    Ismael

    Hey goldengate415,

    Thank you for the inquiry.

    Fixed background images with background-size set to cover are not fully supported on iOS devices.

    — https://caniuse.com/background-attachment > Known Issues

    iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details

    You may need to set the background-attachment to scroll on iOS devices or smaller screens.

    @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;
  }
}

    Best regards,
    Ismael

    April 21, 2025 at 6:14 pm #1481739
    goldengate415

    Thanks Ismael. I assume I should add this under “quick css”?

    Thanks,
    Rob

    April 22, 2025 at 7:21 am #1481781
    Ismael

    Hi,

    Yes, you can add the code in the Enfold > General Styling > Quick CSS field. You may also need to toggle or temporarily disable the file compression settings, then purge the cache. Let us know the result.

    Best regards,
    Ismael

    May 6, 2025 at 6:13 am #1483664
    goldengate415

    Ismael, that worked perfectly, thank you! OK to close ticket.

    Best,
    Rob

    May 6, 2025 at 6:23 am #1483666
    Ismael

    Hi,

    Glad we could be of help! Let us know if you have more questions. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Problem displaying color sections with “fixed” backgrounds on iPad’ is closed to new replies.