[Resolved] Headerbild on iPad not Sharp

[Jenny]

Hello together,

has anyone of you an Idea how I can fox this issue?
The pictures on the Ipad doesn’t have to scroll, but to be sharp :).

And I know is some Apple-Issue. But I have to find a solution for it, because my customer wants to get a perfect website.
https://bilderupload.org/image/eafc68669-img-0792.png

Thanks a lot for looking it up 🙂
Jenny

[Ying]

Hi Jenny,

Yes, it’s an IOS issue.

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

[Jenny]

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

[Fernando]

Hi Jenny,

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

[Jenny]

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

[David]

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.

[Jenny]

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.

[Fernando]

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?

[Jenny]

Dear Fernando, thank you. I have got an iPadPro 12,9″ 🙂
Here the new link.

[Fernando]

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

[Jenny]

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

[David]

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.

[Jenny]

Thank you for you help 🙂
It is resolved 🙂.

[David]

Glad to hear that !!

[Author]

Posts