Twenty Seventeen: Scaling Issue on Front Page Parallax Image Using Safari on iPadOS

[JarretC]

Reporting bug from this forum thread here:

​https://wordpress.org/support/topic/twenty-seventeen-ipados-front-page-featured-images/

I unfortunately don't have a new enough iPad to get iPadOS for my own testing but looks like 2 users have been able to confirm the issue. It appears that the scaling on the featured images in the different panels on the Front Page is incorrect.

One of the users seems to have resolved the issue by commenting out the following CSS

.background-fixed .panel-image {
background-attachment: fixed;
}

[sabernhardt]

I do not have an iPad for proper testing, but I made a patch.

The !important suggested on the support topic should not be necessary here, and I think changing the background-size would not work well with every image size.

This patch should return the background-attachment to scroll when the browser is iOS Safari and the screen is at least 48em (768px) wide. Narrower screens should have the default scroll regardless of the browser.

[sabernhardt]

#52797 was marked as a duplicate.

[mrfoxtalbot]

One of the users seems to have resolved the issue by commenting out the following CSS

.background-fixed .panel-image {
background-attachment: fixed;
}

If commenting out that existing CSS is not viable, we can also add the following CSS instead:

.background-fixed .panel-image {
	background-attachment: unset;
}

This issue was also reported in here ​https://github.com/Automattic/themes/issues/1421

[dkotter]

Screenshot before fix applied

[dkotter]

Screenshot after fix applied

[dkotter]

I tested this on my iPad 8th Generation, running iOS 14.7.1.

I was able to replicate the reported problem and then after adding in the patch on this ticket, was able to verify that it fixed the problem.

Before fix:

After fix:

[audrasjb]

Alright, the patch was tested successfully.
The logic of the proposed patch looks good to me as well.
Self assigning for commit.

[audrasjb]

In 54450:

Twenty Seventeen: Prevent scaling issues on featured images using Safari on iPadOS.

This changeset ensures background-attachment is set to scroll for parallax images when the browser is iOS Safari and the screen is at least 48em (768px) wide. Narrower screens have the default scroll value regardless of the browser. It prevents from scaling issues on the images featured on the front page using Twenty Seventeen.

Props JarretC, sabernhardt, mrfoxtalbot, dkotter.
Fixes #48195.

[sabernhardt]

#49770 was marked as a duplicate.