WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 4 weeks ago

#49435 new defect (bug)

Twenty Twenty: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue)

Reported by: kthmd Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: good-first-bug needs-patch
Focuses: css Cc:

Description

I've noticed on the latest WordPress and twentytwenty theme that there is an inconsistency in top and bottom margins, notably Chrome ignores lines style.css:5296 and style.css:5942 - so Chrome does not have the margins, but Safari does. This seems to be quite a large layout issue cross browser.

For example, use default twentytwenty theme, go to sample page and edit, create a cover block, set to fullwidth, and notice the top and bottom margin difference in Chrome (v80) and Safari (v13)

style.css:5296

	.entry-content .alignwide:not(.wp-block-group.has-background),
	.entry-content .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 6rem;
		margin-top: 6rem;
	}

style.css:5942

	.entry-content > .alignwide:not(.wp-block-group.has-background),
	.entry-content > .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 8rem;
		margin-top: 8rem;
	}

Attachments (3)

chrome.png (3.7 MB) - added by kthmd 7 weeks ago.
Chrome
safari.png (3.7 MB) - added by kthmd 7 weeks ago.
Safari
Firefox.png (1.2 MB) - added by utz119 4 weeks ago.
Firefox

Change History (6)

@kthmd
7 weeks ago

Chrome

@kthmd
7 weeks ago

Safari

#1 @SergeyBiryukov
7 weeks ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from twentytwenty theme: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue) to Twenty Twenty: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue)

#2 @ianbelanger
4 weeks ago

  • Keywords good-first-bug needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 5.3.2 to 5.3

#3 @utz119
4 weeks ago

I can confirm kthmd that style.css:5296 and style.css:5942 are not firing on Chrome. Firefox also has the same issue.
It seems the problem is when @media (min-width: 1000px) or @media (min-width: 700px).

@utz119
4 weeks ago

Firefox

Note: See TracTickets for help on using tickets.