Twenty Seventeen iPadOS front page featured images

  • This issue affects the the display of images on the front page of sites using the Twenty Seventeen theme, when viewed on the new iPadOS 13.1.

    The main image at the top of the front page is OK. However, all featured images of pages in the panels in sections down the front page are magnified (zoomed in) to the point where the image is unrecognizable.

    The same featured images on the respective individual pages display OK on that page.

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

    I have tested this on multiple devices, across several sites. The only devices affected are those running iPadOS 13.1

    Twenty Seventeen front pages display OK on desktops, laptops, on iPads running earlier versions of iOS, and on iPhones with iOS 13.1 installed. But not on iPadOS 13.1.

    Any suggestions as to a possible cause, and ideas on how to remedy this issue, greatly appreciated.

    Thanks,
    Warren

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 31 total)

  • Yeah, I’m also looking the next month or so. Please let me know if you find something nice…

    Thread Starter waxhead

    (@waxhead)

    As others have noted, this may be more of an issue with iPadOS rather than the theme.

    Maybe.

    Wherever the root of the problem lies, it doesn’t look like being resolved any time soon, and I certainly don’t have the time, knowledge or technical expertise to pursue this with the Apple folk. So I have gone down the path of adding code to the theme to disable the parallax effect, which although applied to all browsers, resolves the issue on iPadOS. (Suggested by others – I don’t have the technical knowledge to write this code!)

    On the https://www.compactrv.net site I have added the following to Theme > Customise > Additional CSS:

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

    Resolves the magnified images on iPadOS, but sacrifices the parallax effect on all browsers and OSs.

    Warren

    Is there a resolution already? I have the samen issue. The images on the homepage are not correctly shown on a iPad with the twenty seventeen theme. The first picture is ok, but the others are only showing a small part of the picture.
    This is with Safari on a iPad 2018. My laptop and telephone are showing ok. I have this issue for several websites:

    xploregrunn.nl
    proeftuingroningermosterd.nl
    energiewerkplaatspaddepoel.nl

    Thanks for the hacks. Although “normal” users will never see this thread…

    Really too bad this official theme hasn’t taken this into account yet. Is 2017 really too old to get improved with basics?

    The media query hack on Page 1 (@philipprem) fixes it, but is quite heavy-handed as it spoils the image effect for all viewports between 768px and 1024px. It’s a shame there’s no way of automatically getting the fix obtained by “Request Desktop Site”.

    Can WordPress please resolve this ongoing issue with the resolution of the images on the home page which appears to be specific to Safari on iPad. Even the official Twenty Seventeen Theme Demo is afflicted!

    https://2017.wordpress.net

    Hi, this is still a bug even on iPads with the last iOS version. Is this a general problem between the parallax css implementation of WordPress and WP-Themes and iOS browsers? So, I should not use this in my projects?

    I do not understand, but I did check my websites on iPad, this bug popped up after 2018.

    It looks like the theme is still used on a lot of websites and I see that the forum is very active. Does anyone have an official answer or workaround in the meantime?

    Thx

    I would also very much like an official fix.

    What does help (on iPadOS and Safari) is this additional CSS:

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

    Doesn’t that change the behavior on every platform?

    This worked for me:

    @media only screen and (max-width: 900px) {
.background-fixed .panel-image {
background-attachment: scroll !important;
background-size: contain !important;
}
}

@supports ( -webkit-touch-callout : none) {
.background-fixed .panel-image {
background-attachment: scroll !important;
}
}
    Thread Starter waxhead

    (@waxhead)

    Thanks sashimi57,

    That does seem to work!!

    Scrolling is returned to desktop computers, and the images aren’t zoomed on iPads. (Though no scrolling on iPads – but I can live with that!)

    Thanks again,
    Warren

    —————–

    @media only screen and (max-width: 900px) {
.background-fixed .panel-image {
background-attachment: scroll !important;
background-size: contain !important;
}
}

@supports ( -webkit-touch-callout : none) {
.background-fixed .panel-image {
background-attachment: scroll !important;
}
}
    • This reply was modified 3 years, 6 months ago by waxhead.

    Yeah. Best option so far. Cheers @sashimi57!

    Jan

    (@jandavidhauck)

    The workaround posted by @sashimi57 does work, however, it leaves a large space above and below the image. So while the image is scaled properly, the space that is reserved for the image isn’t. The page of the OP still shows this problem when loading on iPadOS. Any suggestions how to remedy this would be highly appreciated.

    Do you have a link to an example? My site looks good, but I do have a lot of customization going on…

Viewing 15 replies - 16 through 30 (of 31 total)
  • The topic ‘Twenty Seventeen iPadOS front page featured images’ is closed to new replies.