Eye Dropper Color Picker showing blank and no color when color is picked V12

[Abdjulaziz]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

12.0.1

Bug summary

Eye Dropper Color Picker not showing the color in the content node on V12

You can pick the color but it does not show it in the "preview" as shown in the image below.

Tested on V12 & V11 to compare

The color picked is reflecting but not in the backoffice(so it works)

Specifics

I tested this out on 4 browsers on V12.

Chrome - not working Brave - not working Firefox - working Safari - not working

There is not trace on it.

Chrome - console Firefox - console

Steps to reproduce

1. Create doctype
2. Add property
3. Select editor (Eye Dropper Color Picker)
4. Save doctype (in this case allow as root)
5. Create content node
6. Then you should see a blank dropper
7. 

Looking from Firefox it looks like this as it should

Expected result / actual result

The Eye Dropper Color Picker should show like this ↓

And when picking a color it should then show that color like so ↓

Where in Chromium based browser and safari it shows like this ↓

[bjarnef]

Duplicate of https://github.com/umbraco/Umbraco-CMS/issues/14627 This has already been fixed in next release.

For now a workaround is to inject custom CSS via a package.manifest:

.umb-color-picker .sp-replacer .sp-preview {
    height: calc(100% - 10px);
}