Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 9, 2019 at 7:41 pm #1146619
    frankbar

    Hi,
    I’m having an issue with custom background images breaking (extending beyond their constraints) in Safari on iPad.

    I’ve setup a Grid Row with 2 cells (1/2 size each) and have added a large custom background image in one of the cells with these settings:
    Background Attachment: Fixed
    Background Image Position: Top Right (although doesn’t having any effect on this issue)
    Background Repeat: Stretch to fit

    The image displays properly on all devices that we’ve tested (including in the Chrome browser on iPad) with the exception being in Safari on iPad (I’m running iOS 13.1.2 so am not sure if this changed moving from iOS 12). It displays correctly in Safari on iPhone (also running iOS 13.1.2) which seems odd.

    This issue is visible if you view the Freelancer demo in Safari on iPad:
    https://kriesi.at/themes/enfold-freelancer/

    I’ve tried to find a CSS solution, but haven’t found a solution. I’m flummoxed that it works on iPhone, but not on iPad as I would have thought the Safari code would be identical.

    Has anyone else seen this issue and identified a solution?

    October 14, 2019 at 5:29 am #1147711
    Ismael

    Hey frankbar,

    Thank you for the inquiry.

    You may need to adjust the attachment property of the cells’ background images to “scroll” because iOS has issues with “fixed” backgrounds. Please try this code in the Quick CSS field.

    @media only screen and (max-width: 1024px) {
    .flex_cell {
	background-attachment: scroll !important;
    }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.