WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months ago

#49568 closed defect (bug) (fixed)

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

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

Description

Hi,

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 5 months ago.
A video screen capture of the bug
text color FF.gif (374.3 KB) - added by afercia 5 months ago.
49568.gif (1.4 MB) - added by kebbet 5 months ago.
Color picker jumps in Chrome

Change History (10)

@jdy68
5 months ago

A video screen capture of the bug

#1 @audrasjb
5 months ago

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

#2 @afercia
5 months 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
5 months 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

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


5 months ago

#5 @kebbet
5 months 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 5 months ago by kebbet (previous) (diff)

@kebbet
5 months ago

Color picker jumps in Chrome

#6 @jorgefilipecosta
5 months ago

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

The issue should be fixed on WordPress 5.4 RC 2.

#7 @jdy68
5 months 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.