WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 4 months ago

#45901 new defect (bug)

Twenty Nineteen: On single posts with featured images, tall menus appear clipped

Reported by: kjellr Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: css Cc:

Description

When viewing posts with featured images on desktop screens, tall menus are contained only within the featured image/header area. Overflow is cut off:

https://cldup.com/qMVpzNV5XH.thumb.png

A fix (removing overflow: hidden; from .site-header.featured-image) was pursued over on the Twenty Nineteen Github, but it led to problems in Internet Explorer:

https://github.com/WordPress/twentynineteen/pull/724

---

Originally reported on the Twenty Nineteen GitHub repository:

https://github.com/WordPress/twentynineteen/issues/720

Attachments (4)

ie-with-tall-menu.png (247.0 KB) - added by sabernhardt 17 months ago.
tall menu is clipped in WordPress 5.4, any browser (shown in Internet Explorer 11)
ie-overflow-removed.png (328.0 KB) - added by sabernhardt 17 months ago.
IE11: header section without hiding overflow
edge-overflow-removed.png (216.6 KB) - added by sabernhardt 17 months ago.
Edge: header section without hiding overflow
ie-header-image-overlap.png (470.7 KB) - added by sabernhardt 17 months ago.
hiding only horizontal overflow in IE11, the header image still overlaps the content section

Download all attachments as: .zip

Change History (8)

@sabernhardt
17 months ago

tall menu is clipped in WordPress 5.4, any browser (shown in Internet Explorer 11)

@sabernhardt
17 months ago

IE11: header section without hiding overflow

@sabernhardt
17 months ago

Edge: header section without hiding overflow

@sabernhardt
17 months ago

hiding only horizontal overflow in IE11, the header image still overlaps the content section

#1 @sabernhardt
17 months ago

  • Component changed from General to Bundled Theme
  • Focuses css added
  • Version 5.0.2 deleted

The header section was set to overflow: hidden to solve overflow issues in both Microsoft Edge and Internet Explorer.

In both of those browsers, the overflow would have extended beyond the window, adding the vertical scrollbar. In Internet Explorer 11, the bottom of the image also extends below the header, overlapping the content section.

I think part of the solution would be to remove overflow: hidden from the image header section and to add overflow-x: hidden on either the body tag or the page wrapper div. The header image still overlaps the content section in IE11, if somebody could figure that part out.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


9 months ago

#3 @sabernhardt
9 months ago

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

#4 @mikeicode
4 months ago

I ran into this on a .com site and reproduced on a .org site also. The title of this issue says "posts", but it also happens on pages that have the featured images (there is a Customizer setting on this theme to display featured images on pages). The menu items get cut off on desktop and mobile.

Note: See TracTickets for help on using tickets.