Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#49568 closed defect (bug) (fixed)

Editor: ColorPicker panel is "bouncing" on Chrome/Win10

Reported by: jdy68's profile jdy68 Owned by:
Milestone: 5.4 Priority: high
Severity: normal Version: 5.4
Component: Editor Keywords: needs-patch has-screenshots
Focuses: ui, accessibility Cc:



I have a bug with the color picker that allows modify text color under WP 5.4-beta3-47402 with Chrome (Version 80.0.3987.122 (Official Build) (64 bits)) on Win10 version 1909.

This bug does not appear in firefox on the same Win10.

Description of bug:
When I want to change the color of some words in a paragraph block :
I select the words I then use the Text color command from the block menu bar.
Then I click on Custom Color: the color selection box is displayed.
I change the displayed hexadecimal code #0071a1 to #0073aa, the box then moves to the right end of the screen and then moves slightly until I click in a neutral part of the screen.
The color is correctly applied to the selection.

The bug also happens if I click in the hexadecimal code input field and then choose a color with the mouse pointer.

The bug does not appear if I choose one of the predefined colors.

Thanks for the patch.

Attachments (3)

color-picker-display-bug.gif (1.4 MB) - added by jdy68 4 years ago.
A video screen capture of the bug
text color FF.gif (374.3 KB) - added by afercia 4 years ago.
49568.gif (1.4 MB) - added by kebbet 4 years ago.
Color picker jumps in Chrome

Change History (10)

4 years ago

A video screen capture of the bug

#1 @audrasjb
4 years ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 5.4

#2 @afercia
4 years ago

  • Priority changed from normal to high

@jdy68 thanks for your report. I was able to reproduce this on latest trunk 47412.

I change the displayed hexadecimal code #0071a1 to #0073aa

Just to clarify: it happens when manually changing the color value within the fields whether it's hex, rgb, or hsl.

The resulting effect is so disconcerting that I don't think this feature can be shipped in its current state.

#3 @afercia
4 years ago

I can reproduce an odd behavior on macOS Firefox as well. See the animated GIF attached below.

  • manually edit the color value
  • the color picker closes immediately after I type the last hex value character: this shouldn't happen and it's different from what happens in Chrome
  • edit the text color again
  • as soon as I type the last character, the custom color UI closes but the rest of the color picker UI moves to the left and stays there

4 years ago

This ticket was mentioned in Slack in #core-editor by jorgefilipecosta. View the logs.

4 years ago

#5 @kebbet
4 years ago

Can reproduce on

  • macos 10.14.6
  • chrome 80.0.3987.122
  • RC1 (actually 5.5-alpha-47430)
  • twentytwenty

To reproduce

  • Select text part
  • Select text color
  • Click "Custom color"
  • Click in HEX-color input field.
  • Click color gradient

Vid/gif coming soon.

Last edited 4 years ago by kebbet (previous) (diff)

4 years ago

Color picker jumps in Chrome

#6 @jorgefilipecosta
4 years ago

  • Resolution set to fixed
  • Status changed from new to closed

The issue should be fixed on WordPress 5.4 RC 2.

#7 @jdy68
4 years ago

A big thanks to @jorgefilipecosta for the fix.
It's a pleasure to use a color picker that doesn't wiggle and that in a very short time, bravo!

Note: See TracTickets for help on using tickets.