Section Background Bug On Apple Devices - Question | JoomShaper

Section Background Bug On Apple Devices

Laurent

Laurent

SP Page Builder 2 weeks ago

Hi,

I have added an image as section background here, with cover setting => https://prnt.sc/GAIWGsocx0xn

See live page in Hidden Content area.

Any idea why?

Thanks

0
3 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 weeks ago #227200

Hi there!

Thanks for reaching out.

I checked and noticed that the section background attachment is set to Fixed. This is most likely the reason why the background image looks different on Apple devices.

iOS Safari handles background-attachment: fixed differently compared to other browsers, especially when used together with background-size: cover. Because of this, the image may appear zoomed, cropped, or incorrectly positioned.

Please try changing the background attachment option from Fixed to Scroll and check the result.

If you want to keep the fixed background effect on desktop, you can disable it only for mobile devices by adding this CSS:

@media (max-width: 768px) {
    .your-section-class {
        background-attachment: scroll !important;
    }
}

Please replace .your-section-class with your actual SP Page Builder section class/ID.

This will keep the fixed background effect on larger screens while avoiding the iOS rendering issue.

Best regards,

0
Laurent
Laurent
Accepted Answer
1 week ago #227229

ok thanks I will try.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 week ago #227290

Sure! You are always welcome:)

Have a nice day!

0