Background image on safari ios - not adapting position or size

General
1

Could be I had this here somewhere posted before, or it was with another environment:

I am using a scaled graphic background image in a hero section, and positioned it differently for desktop, tablet and mobile. It works fine on desktop, and when narrowing the browser view on desktop for the different breakpoints, it is fine too (including safari), and so is on android mobile. But on my iPad it seems to loose the positioning, or even the size settings.

Settings for tablet in the editor:

Bildschirmfoto 2023-04-22 um 12.51.04
Bildschirmfoto 2023-04-22 um 12.51.041920×1037 88.9 KB

On my iPad it only occurs as mainly pure black. How it is on a iPone, don’t know as I don’t got one

To exclude any other factors, I disabled image plugin and caching with no effect

2

Hi @FZwo,

Sorry to hear you’re experiencing trouble with this.

Unfortunately I haven’t been able to reproduce this issue on my end, as when tested on an iPad, the background image positioning and size settings do get applied as expected.

Could you possibly let me know if this is exclusively happening on a template?
Additionally, could you provide me with a frontend link?

Thank you in advance.

3

It occurs if set to parallax and fixed

4

Because parallax sets fixed positioning, I believe what you are describing may be expected behaviour because of how the CSS itself works:

A nice feature request for Cwicly is proper parallax that can be done a couple of ways:

5

Not sure that that is the same, as my issue is already discussed forever on the net, that iOS is struggling with fix parallax of background images. I now remember that I once hat a small css snippet (that really worked) to set fix to scroll for iOS devices, but can’t find it anymore.

I would suggest that Cwicly disables fix parallax for iOS devices by default (so this will keep on working on Android devices), and later, if possible, offers to enable that if there is an solution

So this is not a Cwicly related bug, may should be shifted to feature requests

6

Cwicly should never alter or manipulate native CSS properties.
We are not talking about features or options which are added by Cwicly.

7

Agreed, so cwicly could just offer the option to disable it for ios or to change fixed to scroll for ios

8

For the matter of consistency across all devices, you could consider changing the background-attatchment value from fixed to scroll on the first available breakpoint.
But of course, that’s totally up to you. It’s just how I would do it.
Not sure if a dedicated option would make sense here.
But a code snippet could be provided in the docs to address this iOS (Safari) bug.

I’m pretty confident that there will be a parallax option at some point, maybe with the upcoming animator, which would deliver a consistent experience across devices.

9

I am just going to search for that CSS that changes the fixed parallax for background-attachment to scroll for iOS only, thats a better solution (for me). I already had implemented that some time ago, but can’t remember where and how exactly it looked like.

10

Maybe that’s a workaround which fits your needs.
It can be implemented natively via the builder as well.

Edit:
Here is another resource in english with a similar approach (the one posted above can also be found in the comment section), so others can benefit from this workaround too.

I think this topic can be moved to general, as it’s not related to Cwicly.
Apparently, Apple has no intention to fix this.
Consider to mark this post as the solution to help other users finding an answer to this topic.

11

Solved it, here we go (has to be added as custom CSS to the section with background-attachment):

@supports ( -webkit-touch-callout : none) {
.your section class {
background-attachment:scroll;
}
}