WordPress.org

Make WordPress Core

Opened 23 months ago

Last modified 7 months ago

#45901 new defect (bug)

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

Reported by: kjellr Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
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 7 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 7 months ago.
IE11: header section without hiding overflow
edge-overflow-removed.png (216.6 KB) - added by sabernhardt 7 months ago.
Edge: header section without hiding overflow
ie-header-image-overlap.png (470.7 KB) - added by sabernhardt 7 months ago.
hiding only horizontal overflow in IE11, the header image still overlaps the content section

Download all attachments as: .zip

Change History (5)

@sabernhardt
7 months ago

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

@sabernhardt
7 months ago

IE11: header section without hiding overflow

@sabernhardt
7 months ago

Edge: header section without hiding overflow

@sabernhardt
7 months ago

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

#1 @sabernhardt
7 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.

Note: See TracTickets for help on using tickets.