Twenty Seventeen: Front Page Panel Images Incorrectly Zoomed on iPad OS

[edequalsawesome]

Steps to replicate

Set up the front page of a site using Twenty Seventeen with panels that show pages with featured images.

Result

The featured images will be zoomed in on iPad OS, but will work elsewhere:

Expected

The featured image will be displayed at a size that will allow the image to be shown correctly:

• User report: #14006590-hc
• Follow-up ticket: #2376264-zen

Provided the customer with the following CSS to resolve the issue, although that removes the parallax effect from all browser types:

/* resolve issues with background positioning */
.background-fixed .panel-image {
	background-attachment: unset;
}

[wazmac]

Similar issues here.

Example pages:
elementsofhyams.com
compactrv.net
kiamacycles.com.au

The only devices affected are those running iPadOS 13.1

Web pages display OK on desktops, laptops, on iPads running earlier versions of iOS, and on iPhones with iOS 13.1 installed.

Warren

[wazmac]

An update on this issue....

The same websites - WordPress sites that don't display correctly using Safari on iPadOS - display just fine using the Chrome browser app on iPadOS.

I have posted some screen shots and more details at http://bit.ly/2lCEIxp

Warren

[wazmac]

Further note on this issue - if the mobile version of the site is loaded in Safari on iPadOS, the images display OK, albeit without the parallax effect.

I have updated the previous notes with screenshots, etc, at http://bit.ly/2nvx7kT

[thebud15]

Reported in 2433948-zd

[Robertght]

I can confirm this to be an issue with Lodestar as well - it looks more like a general issue on iOS and background images being fixed.

[eduardozulian]

Reported in 2520933-zen

[nunyvega]

Reported in 2531839-zen and 2532347-zen

[katiebethbrown]

Another report in 7933545-hc

User requested to be notified when a fix is in place. I set expectations.

[dcoleonline]

Another report in 4136047-zd

[kosiew]

Another report in #4261626-zen

[nicolynramos]

Another report here: 4361861-zd
I was able to reproduce on testsep16.wordpress.com on iPad Air 4th gen on OS 15.1

[cuemarie]

Another report here: 4361861-zd I was able to reproduce on testsep16.wordpress.com on iPad Air 4th gen on OS 15.1

Just following up as user replied; they'd like to be notified when a fix is in place. @nicolynramos set expectations. 👍 Closing this ticket.

[dcoleonline]

4554952-zen
I recommended that they switch to a newer theme

I was able to replicate this on a 7th gen iPad with iPad iOS 14.8

This happened both on the demo site and the customer's site

[mrfoxtalbot]

This issue is affecting a bundled (default) theme has already been reported in trac:
https://core.trac.wordpress.org/ticket/48195

I am going to close this issue in favor of the one in trac.

[mrfoxtalbot]

I am reopening this. After some discussion with the themes team, we are going to tag this type of issue as [Status] Core fix needed but leave them open for tracking and discoverability purposes.

[rickmgithub]

It looks like this issue remains a problem. A new report which we can replicate on our end with the 2017 theme.

5774675-zd

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 2376264-zen
• 2433948-zen
• 2520933-zen
• 2531839-zen
• 2532347-zen
• 4136047-zen
• 4261626-zen
• 4361861-zen
• 4554952-zen
• 5774675-zen
• 8473493-zen

[mrfoxtalbot]

I was looking at the Trac issue and it appears as "Closed/Fixed" there 🤔

I did a quick test and I cannot reproduce this anymore.

@rickmgithub, were you able to reproduce this yourself on the site that reported the issue? Thank you!

[upwardmomentum84]

Another case here: 40670185-hc

Site is on Personal plan so no CSS.

[mrfoxtalbot]

The trac issue is solved, so this should be solved in dotcom too.

I see that the dotorg version is on Version 3.2 but dotcom's is Version is 3.2-wpcom, maybe this is what's causing the inconsistency, @jeffikus ?

[mxhassani]

The issue is still standing: 8473493-zen

[mrfoxtalbot]

I see @jeffikus is no longer working on themes.

@dsas, I am not sure if you are still working on themes, do you know who owns keeping dotcom themes up to date?

Thank you!

[dsas]

do you know who owns keeping dotcom themes up to date?

It's been a bit of a grey area, but I guess it's now a Marvel responsibility to be handled by the theme supersquad (currently myself, @miksansegundo and @alaczek). We get to spend some of our time on theme maintenance issues

[mrfoxtalbot]

theme supersquad

I love the name :D

It'd be good to review bundled themes to ensure dotcom is using the latest version.

Thanks again!

[dsas]

We have the code mentioned in the patch applied already on dotcom.

I can't repro when using a simulated ipad on either a fresh install or viewing the site in 40670185-hc Can anyone reproduce this and write some reproduction steps for me? CC @upwardmomentum84

The issue is still standing: 8473493-zd-a8c

The user was using Twenty-Twenty rather than Twenty-Seventeen so that sounds like a different bug @mxhassani

[miksansegundo]

I also cannot reproduce this issue when using an up-to-date Safari browser on iPhone and iPad.

Tested on my own test site and viewing the site in 40670185-hc

I believe this is another issue like Automattic/wp-calypso#87158 and Automattic/wp-calypso#87290 that only affect old Safari browsers.

If someone can reproduce it, please indicate the Safari or iOS version, and share the site.

[eduardozulian]

I also can't reproduce it anymore using an iPad Air 2014. Based on the above, I'd vote for closing this one (cc @mrfoxtalbot)

[wazmac]

Hi,I have just tried to reproduce the issue - up until recently it was an ongoing problem on http://elementsofhyams.com. Though now seems to be OK again.We have added additional CSS code ***@***.*** only screen and (max-width: 900px) {.background-fixed .panel-image {background-attachment: scroll !important;background-size: contain ***@***.*** ( -webkit-touch-callout : none) {.background-fixed .panel-image {background-attachment: scroll !important;}}This had been effective initially, but then the site began displaying incorrectly again, but now seems to be OK. If I knew enough about this sort of stuff, I would remove the additional CSS code and see what effect that had.But if it ain’t broke I am hesitant to mess with it!Thanks,WarrenOn 22 Aug 2024, at 5:51 am, Alvaro Gómez Velasco ***@***.***> wrote: Closed #1421 as completed. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>