Customiser colour picker and popups broken in 6.1 RC1

[tecazwebdev]

When using the customiser, and selecting a colour, using a colour picker, in the 6.1RC1, the colour selector hovers under the page, rendering it badly, and making it hard to make changes within the colour picker.

Here is how it looks in 6

​https://www.bathroom-images.com/wp-content/uploads/2022/10/Wordpress_6.png

Here's how it looks in 6.1

​https://www.bathroom-images.com/wp-content/uploads/2022/10/Wordpress_6__RC1.png

As you can see, it's obscured by the scrollbar, making the editing of colours impossible. It seems to happen to all of the popups for editing things in the customiser, killing usability.

​https://www.bathroom-images.com/wp-content/uploads/2022/10/typography_6_1_RC1.png
Showing a typography selector drifting offscreen to the left, making it unusable.

I noticed this issue in Gutenberg releases before, when testing, so it's somewhere inside the Gutenberg part of the code.

Sorry I'm not technical enough to identify the cause.

[tecazwebdev]

The popup in the customiser incorrectly placed

[pbiron]

Hi @tecazwebdev thanx for the ticket and welcome to trac!!!

What theme is used on the site in your screenshots? The reason I ask is that it appears that theme uses their own color picker (since those pickers are very different from those in WP core).

[tecazwebdev]

Replying to pbiron:

Hi @tecazwebdev thanx for the ticket and welcome to trac!!!

What theme is used on the site in your screenshots? The reason I ask is that it appears that theme uses their own color picker (since those pickers are very different from those in WP core).#

This is using the Kadence theme. I have sent them a report too.

[pbiron]

Replying to tecazwebdev:

This is using the Kadence theme. I have sent them a report too.

I installed Kadence (free) v1.1.30 and can replicate the overlap you are reporting (and also confirmed that the pickers in question are specific to that theme).

It's possible that some change in the customizer CSS in 6.1 has caused this problem, so I'm keeping this ticket open for now. @westonruter are you aware of any such CSS changes?

[westonruter]

I am not aware, but I haven't been following such changes explicitly.

[pbiron]

Replying to westonruter:

I am not aware, but I haven't been following such changes explicitly.

My apologies...I thought you were a component maintainer.

Pinging David, who is a maintainer :-) @dlh, see comment 3

[dlh]

I'm not aware of any relevant changes, either. The only recent change to the Customize-specific CSS files that I can see is [54188], which seems unlikely to have caused the issue.

I also looked through the Kadence theme and noticed that the color picker is using the <Popover> component, among others, from @wordpress/components (cool!). My guess would be that a change in the component library is having this side effect, but that's just a guess.

[tecazwebdev]

I have occasionally been testing out the Gutenberg updates, for the last few months, and this glitch presents itself on 6.0 / 6.0.3 with the current Gutenberg installed, so the break has occurred when Gutenberg was merged with 6.1 RC1.