Skip to content

Cover Block: Fixed background problem in iPadOS 13.x Safari #17718

@depthoffocus

Description

@depthoffocus

iPadOS now defaults to a 'Desktop' view in the browser on (all?) iPad devices, which suffers from the problem with Safari's handling of background-size: cover and background-attachment: fixed.

According to Apple's Safari 13 release notes, in iPadOS they have:

Disabled -webkit-overflow-scrolling: touch on iPad.

However, it appears not to be that simple. They have disabled it in the "desktop" mode, but seemingly still provide it it if you request the "mobile" site.

The absence of this webkit-only feature means that the CSS implemented in #11480 that sets background-attachment: scroll no longer works in the default iPadOS browser view:

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

To reproduce

  1. Go to a page with a fixed background cover block above a lot of content
  2. The background image will be blurry and stretched like it was before Disable fixed cover attachment on iOS #11480
  3. Choose "Request Mobile Website"
  4. The fix behaviour is restored

(Tested with Gutenberg 6.5.0)

Expected behavior

Ideally the existing mobile Safari behaviour should be preserved, since background-attachment: fixed is still not correctly supported.

Smartphone (please complete the following information):

  • Device: iPad Pro 10.5"
  • OS: iOS 13.2
  • Safari

(Edited for clarity. Apologies for any dimwittedness -- this is my first ever github issue!)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Browser IssuesIssues or PRs that are related to browser specific problemsCSS StylingRelated to editor and front end styles, CSS-specific issues.Good First IssueAn issue that's suitable for someone looking to contribute for the first time[Block] CoverAffects the Cover Block - used to display content laid over a background image[Status] In ProgressTracking issues with work in progress

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions