Headerbild on iPad not Sharp

Hi Jenny,

Yes, it's an IOS issue.

I would suggest do NOT set the background-attachment fixed for mobile and tablet.

Dear Ying :/ it isn't set fixed. Where is my mistake?

I tested the following:

> Set the picture on iPad Scroll
> Used a special "Area" and activated it just on mobile & deactivated it on Desktop (Hide on tablet also not working - is it because the 12,9" iPad has the size of an Laptop?

Thanks for looking it up again,
Jenny

Hi Jenny,

On smaller IOS screens, in comparison to the 12,9” one, does the issue occur?

Dear Fernando,

i don't know, but I have to solve the issue for the 12" iPad also :/.
I would deactivate "show it on iPad" but it doesn't react. The iPad also shows the parallaxes.
Have you got an Idea how to solve it? The solution Ying suggested I tried, but it doesn't work.

Jenny

Hi there,

try adding this CSS to your site:

@media(pointer: coarse) {
    .gb-container,
    .gb-container:before {
        background-attachment: initial !important;
    }
}

This should remove the fixed background-attachment on any touch enabled device.

Thank you so much @David. That worked perfect :).
Now I have got a last Question. I have activated:

"Hide" on tablet on the second picture. But the iPad does not react on it. Have you got an Idea for this?

If not - not a problem. It is much better than before.

What specific tablet are you testing on? hide-on-tablet should hide on screen dimension 768px up to 1024px.

Moreover, I can’t seem to view your site now. Can you check if it’s viewable to the public?

Dear Fernando, thank you. I have got an iPadPro 12,9" :)
Here the new link.

Which specific section is the “second picture”, and in what Block did you activate the hide-on-tablet? An image or a container block?

Dear Fernando,

this block in the Video (the second) I set "Hide on" but I see it on my iPad 12.9".
Can you help me? :)

https://capture.dropbox.com/R1w3fVuBvvqx0qFk

As you said the Pro ipad has a resolution like a laptop so it doesn't get covered by the hide-on-tablet class.
We could do something like this, updating the CSS i provided above:

@media(pointer: coarse) {
    .gb-container,
    .gb-container:before {
        background-attachment: initial !important;
    }
    .hide-on-touch-device {
        display: none !important;
    }
}

This will forcibly hide any element that you add the hide-on-touch-device Class to, when viewed on a touch device.

Thank you for you help :)
It is resolved 🙂.

Glad to hear that !!