Twenty Twenty – cover-template feature image parallax is not working on iOS

  • Hi all,

    I love Twenty Twenty theme but cover-template featured image scrolling/parallax function is not working on iOS devices (iPhone 6S und ein iPad Pro 10,5” both running on iOS 13.3). Image is zoomed in to the max. Seems like same bug is in twenty seventeen.

    This fixes the issue, but the image is fixed this way.

    @media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
  .cover-header.bg-attachment-fixed {
    background-attachment: scroll;
  }
}

    I discovered this behavior by accident using the iPad of a friend. As this is a global problem I would like to ask developers to fix this, either by the code above and a note in the theme documentation or a real fix. Seems like other developers managed to fix parallax image scrolling on iOS devices. But to leave this without notifying the users should not be the case.

    thx a lot

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter TungstenE2

    (@tungstene2)

    https://www.ads-software.com/support/topic/twenty-twenty-featured-image-issues/#post-12317148

    Thread Starter TungstenE2

    (@tungstene2)

    https://www.ads-software.com/support/topic/twenty-seventeen-ipados-front-page-featured-images/

    Thread Starter TungstenE2

    (@tungstene2)

    ticket created:
    https://github.com/Automattic/themes/issues/1747

    Hi, there is a trac ticket for the official version of the theme here:

    https://core.trac.www.ads-software.com/ticket/48802

    I see you created an issue on Github with Automattic but they wouldn’t handle the .org version of the theme.

    Anonymous User 14254218

    (@anonymized-14254218)

    This is a general issue on most iOS devices and known for years already.
    background cover behaves differently on iOS. It uses the body height instead of the container height which on mobile or tablet devices may result in a really high body height, hence extremely stretching the background.

    This is an issue of the combination of background-size: cover; and background-attachment: fixed;.

    See this stackoverflow post:
    https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios

    You can use a div within a div and let the second div hold an image and give it a position:fixed but this would result in this div not being content aware hence you can only use one cover on the page which would also most likely overwrite your header background image.
    Only solutions helping here would involve javascript.

    Simply put: If you want to use multiple parallax covers on iOS without adding unreasonable code -> you can’t.

    Since the general recommendation advises against the usage of parallax effects on mobile devices because it needs a lot of calculations and would cause issues on “smaller” mobile CPUs, I would recommend reconsidering your design choices if you insist on using a parallax effect on smaller screens.

    I use the following code (considering mobile first development) on my pages. This is basically a similar solution to that one you already found except considering mobile first development. It should generally fix this issue by excluding parallax effects on smaller screens.

    
.bg-attachment-fixed, .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
    background-attachment: scroll;
}
@media (min-width: 1000px) {
    .bg-attachment-fixed, .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment: fixed;
    }
}
    • This reply was modified 4 years, 10 months ago by Anonymous User 14254218.
    • This reply was modified 4 years, 10 months ago by Anonymous User 14254218.
    Thread Starter TungstenE2

    (@tungstene2)

    thx for the reply.

    My point is, that if this is a known bug for long time, this should be handeled in the theme directly and not by some workaround by every user, who just finds this. Everybody else would assume that a theme in the 2020 should be working fine with all common browsers including iOS. Or am I wrong?

    Anonymous User 14254218

    (@anonymized-14254218)

    This is not a bug related to the theme but a bug within the implementation of background-size: cover; and background-attachment: fixed; within the browser which means you will most likely have to rely on apple/google to fix this, not the theme creator.

    But yea, maybe the CSS above should be implemented within the theme with a comment why this is not parallax on mobile (as you mentioned above).

    • This reply was modified 4 years, 10 months ago by Anonymous User 14254218.
    Thread Starter TungstenE2

    (@tungstene2)

    As we have no chance to have Apple to fix this but the theme, this should be handled by the theme. How best to adress this?

    Thread Starter TungstenE2

    (@tungstene2)

    @raqai your fix only works for iPhone but not for iPad. Will go back to the fix I posted above.

    Anonymous User 14254218

    (@anonymized-14254218)

    @raqai your fix only works for iPhone but not for iPad. Will go back to the fix I posted above.

    I probably missed some media query for your iPad. I do not have one here to test it properly. Thanks for the info ??

    As we have no chance to have Apple to fix this but the theme, this should be handled by the theme. How best to adress this?

    Depending on what you mean by “should be handled by the theme”.

    If you mean not to use fixed background and ignore parallax on mobile devices:
    Definitely yes. This can be accomplished by the css above and should be added to the theme by default.

    If you mean to implement parallax on mobile devices:
    No, this should not be handled by the theme at all. This is a technical issue. Every at the current date available “solution” would result in a huge amount of code overhead and would have a really bad impact on the performance of your website.

    • This reply was modified 4 years, 10 months ago by Anonymous User 14254218.
    Thread Starter TungstenE2

    (@tungstene2)

    yes, I mean option 1 you mentioned. Fixing background and ignore parallax if not supported by certain browser engines.

    Thread Starter TungstenE2

    (@tungstene2)

    I also do not have iPhone or iPad. Had to ask a friend to test it for me…. ??

    Thread Starter TungstenE2

    (@tungstene2)

    @raqai
    How to address this to add to the theme by default?
    Are theme developers reading here? Where to create a ticket for this?

    fixed background and ignore parallax on iOS devices (iPhone, iPad)

    • This reply was modified 4 years, 10 months ago by TungstenE2.
    Thread Starter TungstenE2

    (@tungstene2)

    anybody?

    Thread Starter TungstenE2

    (@tungstene2)

    huhu, anybody reading here?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Twenty Twenty – cover-template feature image parallax is not working on iOS’ is closed to new replies.