Twenty Twelve - Background color applies to the entire page

[rw-ye]

Quick summary

The background color on the Twenty Twelve theme applies to the entire page on the front-end, instead of just the background surrounding the page on AT sites.

Simple sites are not impacted.

Steps to reproduce

1. Make sure your site is Atomic
2. Go to Appearance > Customize > Colors & Backgrounds
3. Set the background color to any color and Save changes
4. Check the front-end of your site and you'll notice the background color is applied to the entire page

What you expected to happen

For the background color to apply to just the outside background and not impact the page content. Below is how it looks on a Simple site.

What actually happened

Background color impacts the entire page on the front-end

Browser

No response

Context

No response

Platform (Simple, Atomic, or both?)

Atomic

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

CSS Workaround:

.site {
    background-color: #ffffff;
}

[mrfoxtalbot]

I cannot replicate this on my testing AT site https://mrfxvanillaat.wpcomstaging.com/

I am going to close this as "cannot repro" but please feel free to reopen it if you can still replicate this consistently (no plugins, etc). If you can replicate, please share a direct link to the site. Thank you @rw-ye!

[rw-ye]

Hey @mrfoxtalbot 👋

I'm still able to reproduce on my end with all plugins deactivated. Here is my site: https://rwye1.wpcomstaging.com/

I'll see if I can replicate on a fresh AT site.

[rw-ye]

I created a fresh new AT site and I get the same issue: https://test15793.wpcomstaging.com/

[mrfoxtalbot]

Thank you for re-testing this @rw-ye.

I added myself to your testing site and tried to change the color but when I do this, it seems to work as expected.

https://github.com/user-attachments/assets/b2d2202f-3f22-4367-8628-05692cf93ef5

How did you go about changing the background color to replicate this? Could you share a screen recording? Thanks again!

[rw-ye]

@mrfoxtalbot The issue becomes visible on the front end after saving the background color changes. I apologize for not making the steps clearer initially. I have also updated the steps in this GitHub issue to specify that the issue shows on the front end.

Below is a screen recording

https://github.com/user-attachments/assets/045e07eb-baf7-4547-95ea-3a762a3a9856

[mrfoxtalbot]

The issue becomes visible on the front end after saving the background color changes. I apologize for not making the steps clearer initially

No worries, @rw-ye! On the contrary, thank you for not giving up on me! :)

I can confirm I can replicate this on a dotcom site.

I have also tested it on a self-hosted site and can confirm Twenty Twelve works as expected there:

[peterschimke]

@mrfoxtalbot was this issue fixed elsewhere?

[mrfoxtalbot]

was this issue fixed elsewhere?

Not as far as I know, @peterschimke. I could not replicate this on a self-hosted site either, it seemed to happen on AT sites only.

Are you no longer able to replicate it?