WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 14 months ago

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

Change History (10)

@jdy68
15 months ago

A video screen capture of the bug

#1 @audrasjb
15 months ago

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

#2 @afercia
15 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
15 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.


15 months ago

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

@kebbet
14 months ago

Color picker jumps in Chrome

#6 @jorgefilipecosta
14 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
14 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.