Page optimize plugin causing horizontal scroll on some themes

[simison]

Quick summary

Page optimize conflicts with something on a basic Atomic site, causing a big horizontal scroll to appear on multiple themes:

Steps to reproduce

• Normal Atomic site with block theme ("bain marie" or "dark academia" for example)
• Ensure Page optimize and it's "concat CSS" functionality is enabled (as is by default)
• Open blog post with comments, note the scroll horizontally both mobile and desktop screens — example https://simisonatomic1.wpcomstaging.com/2019/09/04/example-post/

Screen.Recording.2024-10-21.at.15.13.18.mov

• Note how hiding navigation area in the example "solves" the issue.

• Disabling comments (or looking at pages without comments) also solves the issue.

• Also disabling concatenating "solves" the problem:

  

Likely some CSS relevant to the the navigation area or comments was relying on got loaded in wrong order because of CSS concat.

The issue didn't replicate the Classic "Mayland" theme.

What you expected to happen

No horizontal scroll on mobile.

What actually happened

Horizontal big area on mobile:

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Reported at p1729454109701619-slack-C029GN3KD (discussion in another thread p1729454102062879-slack-C029GN3KD)

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• I could also replicate it using Jetpack Boost, so does that mean it's a combination between the theme/gutenberg core and the optimization process or something else?

📌 ACTIONS

• Triaged

I can see @escapemanuele is assigned so I'll mark this as triaged, but let me know if you need further hands to test this.

[agrullon95]

Using @simison test site (https://simisonatomic1.wpcomstaging.com/2019/09/04/example-post/), I figured out that the screen reader label for the search navigation feature is causing the width issue. It has a width:100% set, but I'm going to look further into it to see if this is a proper solution across themes.