Make WordPress Core

Opened 5 years ago

Last modified 7 weeks ago

#48837 new defect (bug)

Twenty Twenty: Wrong cover height in Chrome mobile

Reported by: oldnapalm's profile oldnapalm Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch
Focuses: css Cc:

Description

WordPress 5.3 with Twenty Twenty theme, all plugins disabled.

Using Chrome mobile on Android the down arrow doesn't appear on screen unless you scroll down a little. Using Samsung browser it displays correctly.

Can be reproduced opening http://endorfinamente.com.br on Android Chrome.

Screenshots:
http://endorfinamente.com.br/tmp/Screenshot_20191129-102354_Chrome.jpg
http://endorfinamente.com.br/tmp/Screenshot_20191129-102414_Samsung%20Internet.jpg

Attachments (3)

Screenshot_20191129-102354_Chrome.jpg (214.0 KB) - added by SergeyBiryukov 5 years ago.
Screenshot_20191129-102414_Samsung Internet.jpg (243.9 KB) - added by SergeyBiryukov 5 years ago.
Screenshot_20191129-132702_Chrome.jpg (239.9 KB) - added by oldnapalm 5 years ago.
Looks like it disregards the address bar height, if you scroll enough to hide the address bar, the cover fits exactly

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
5 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Wrong cover height in Chrome mobile to Twenty Twenty: Wrong cover height in Chrome mobile

@oldnapalm
5 years ago

Looks like it disregards the address bar height, if you scroll enough to hide the address bar, the cover fits exactly

#2 @ianbelanger
5 years ago

  • Keywords needs-testing added
  • Severity changed from trivial to normal

#3 @guyfisher
5 years ago

I have observed the same problem with the cover header height in Chrome on an Android phone and tablet. Interestingly, Chaplin's cover header does not appear to have the same bug. Its scroll down arrow appears comfortably within view at the bottom of the browser on both devices.

#4 @yari2u
5 years ago

The same problem also exists on iOS when using Safari and Chrome on iPhone/iPad (Edge and Firefox display the Twenty Twenty Cover Template correctly).
@ianbelanger Solving this should be prioritised for 5.4 as the bug makes the current Cover Template for Twenty Twenty quite unusable on iOS devices.
See #49467

Last edited 5 years ago by yari2u (previous) (diff)

#5 @ianbelanger
5 years ago

  • Focuses css added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

#6 @sabernhardt
5 months ago

#49467 was marked as a duplicate.

#7 @karmatosed
3 months ago

  • Keywords needs-testing removed

I can confirm this is still an issue so it would be good to consider a patch. I tested using Safari on an iPhone so it is wider spread as identified.

#8 @karmatosed
3 months ago

#49667 was marked as a duplicate.

#9 @sabernhardt
2 months ago

#60462 was marked as a duplicate.

#10 @twiddler
2 months ago

Fix:

.screen-height {
   min-height: 100dvh;
}

#11 @karmatosed
7 weeks ago

@twiddler thank you for providing the fix. Are you able to create it as a patch?

Note: See TracTickets for help on using tickets.