Unmodified Twenty Twenty-Four Theme Layout Breaks on Mobile

[script2see]

I initiated a fresh installation of WordPress 6.5.2 on my offline testing server, LocalWP. Twenty Twenty-Four is the base theme, and I have not modified it at all.

As you will see from the attached screenshots, the layout for the default home page breaks during mobile-responsive testing for the iPhone 14 Pro Max in the Developer tools from Google Chrome. This dooesn't happen on every page load but appears to occur randomly.

[script2see]

Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhone Pro 14 Max

[script2see]

Unmodified Twenty Twenty-Four Home Page in Landscape view for iPhone Pro 14 Max

[script2see]

No Plugins Installed

[script2see]

The attached photos show the layout breaking, as well as the fact that I haven't installed any plugins.

[script2see]

Unmodified Twenty Twenty-Four Home Page in Portrait view for iPhoneX

[jamieblomerus]

I have tried to reproduce this issue locally (using both the version in trunk and reported version 6.5.2), but there does not seem to be any problem with the bundled theme.

As you also reported that it occurs randomly it is more probably a problem with your browser.

[script2see]

I managed to null out some of the problem by writing the following style rules:

main#wp--skip-link--target {
	width: 100% !important;
}

.entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
	width: 100% !important;
}

The fact that those rules eliminated part of the problem is proof that there is indeed a problem.

I also added the following to theme.json to stop root-level padding from breaking layouts:

"styles": {
	"spacing": {
				"padding": {
				"left": "0",
				"right": "0"
			}
		}

[jamieblomerus]

Okay, but the problem does not seem to be able to be reproduced. To help us reproduce the issue, could you reproduce the problem on a public site and then send a link?

Also, could you share more info about your system and browser? Please navigate to the admin panel, Tools -> Site Health, and choose the " Info " tab. Then click the button "Copy site info to clipboard" and paste the content here. Getting information about your browser differs from browser to browser, but a quick Google search should show you the steps needed.

Please perform this and send the requested information, so I can continue the testing.

[karmatosed]

I am also unable to replicate this so for now going to mark this to close. We can always reconsider if this has more information later. Thank you everyone.

[karmatosed]

For now I am closing this and we can always reopen, thank you everyone.