Cover block with fixed background, cover image doesn’t scroll on iPhones

Hi @futureisfiction

I’m finishing up this website but the person I’m making it for says that on several different phones, the background image in the cover block doesn’t scroll behind the contact form.

I can’t test it myself because it works on Android phones and computer just fine. I’m not sure what to do to help her fix it.

Because of the performance/processor needs of having a fixed background – it differs between phone manufacturers whether they support.

I’m aware that Apple definitely don’t support it in their browser Safari – is that possibly what they might be checking it on?

Yes, she mentioned she usually browses with Safari on her phone.

What should I do as a fallback for those using Safari, so it will at least still look good for Safari users? She says the image layout/crop looks bad.

I know quite a bit of HTML/CSS but am not always wise about selectors. Is there CSS I could use to specify certain Safari browsers and to tell it if Safari version XYZ, display it the not-fixed/non-parallax, default way?

Thanks so much for your help.

Hey @futureisfiction it’s definitely a bit of a tricky situation.

I had a quick look around – and saw some suggestions of adding this CSS to try and resolve it for Safari on iOS devices. You could try adding it to your ‘Additional CSS’ section under Appearance > Customize.

.wp-block-cover.has-parallax, .wp-block-cover-image.has-parallax {
  @supports (-webkit-touch-callout: inherit) {
    background-attachment: scroll;
  }
}

I’ve not been able to try it out myself – but it’s worth a try.