Make WordPress Core

Opened 3 years ago

Closed 2 months ago

#48195 closed defect (bug) (fixed)

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

Reported by: jarretc's profile JarretC Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit has-screenshots
Focuses: css Cc:

Description

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;
}

Attachments (3)

48195.patch (590 bytes) - added by sabernhardt 15 months ago.
before.PNG (2.6 MB) - added by dkotter 3 months ago.
Screenshot before fix applied
after.PNG (5.5 MB) - added by dkotter 3 months ago.
Screenshot after fix applied

Change History (12)

#1 @SergeyBiryukov
3 years ago

  • Summary changed from Scaling Issue on Front Page Parallax Image Using Safari on iPadOS for TwentySeventeen to Twenty Seventeen: Scaling Issue on Front Page Parallax Image Using Safari on iPadOS

@sabernhardt
15 months ago

#2 @sabernhardt
15 months ago

  • Focuses css added
  • Keywords has-patch needs-testing added

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.

#3 @sabernhardt
15 months ago

#52797 was marked as a duplicate.

#4 @mrfoxtalbot
6 months ago

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

#5 @sabernhardt
6 months ago

  • Milestone changed from Awaiting Review to 6.1

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 months ago

@dkotter
3 months ago

Screenshot before fix applied

@dkotter
3 months ago

Screenshot after fix applied

#7 @dkotter
3 months ago

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.

See above for screenshots of both before and after this fix was applied (tried to add those inline here but obviously not quite sure how to achieve that)

Last edited 3 months ago by dkotter (previous) (diff)

#8 @audrasjb
2 months ago

  • Keywords commit has-screenshots added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to accepted

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

#9 @audrasjb
2 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.