Color Picker - selected color not displaying in Google Chrome (v12)

[Jay-umbr]

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

12.0-rc3

Bug summary

If you have an eye dropper color picker property on a node, the selected color is showing up as blank in the backoffice. This only happens in Chrome (v 114).

Specifics

I am attaching an image to showcase the issue: I could not spot any relevant errors or warnings in the browser console.

Steps to reproduce

Create a document type, assign a new property with any name and choose the editor to be eye dropper color picker. Create a new content item with that doctype, then select any color in the picker. You might not even need to refresh the page - for me the preview box where the color should be does not update.

Expected result / actual result

The property editor should show your selected color.

Instead, it seems to default to pure white (not even the unpicked alpha default color).

The editor works completely fine on Firefox, I have not checked other browsers.

[nikolajlauridsen]

Hey @Jay-umbr thanks for reporting, I can indeed reproduce, the issue seems to have started in 11.4 😄

I'll put this as up for grabs 😄

[bjarnef]

@nikolajlauridsen this should already have been fixed in https://github.com/umbraco/Umbraco-CMS/pull/14251 ?

But Chrome is currently messing around with stuff. We had in a project some custom styling on a native date input. After an upgrade it was broken, but a few weeks later in a new version, it worked again 😅

Anyway I bet it's an issue when the height of the inner container (span) in the button element.

[gcutroneo]

@nikolajlauridsen Same problem for me. Umbraco 11.4, Chrome last version (114.0.5735.110) and Edge. Works fine on Firefox. :-)

[bjarnef]

Seems to work fine to me in 12.1.0-rc (latest changes in contrib branch) in Chrome Version 114.0.5735.110

and the changes here https://github.com/umbraco/Umbraco-CMS/pull/14251/files are included in v12 branch https://github.com/umbraco/Umbraco-CMS/blob/v12/dev/src/Umbraco.Web.UI.Client/src/less/components/umb-color-picker.less

I guess the 12.0-rc3 was published merge the fix was merged. However it should probably be cherry picked to v11 as well.

// cc @nul800sebastiaan

[nikolajlauridsen]

Heya, I think you're very right @bjarnef it does seem like it just wasn't cherry picked, thanks a lot for the heads up, I've cherry-picked the PR you linked to V10 here https://github.com/umbraco/Umbraco-CMS/commit/9a3e6556459f8fd3cc5278216a4f560b55fa07b7, so I'll go ahead and close this issue.

Thanks again for the heads up (and the PR). and pardon the delayed answer, got all tied up in Codegarden and hammerschlagen 😉

[vnv-dwarf]

I still experience this issues, even tough it is marked as fixed. I am using Umbraco 11.4.1 and Edge version 114.0.1823.58

[bjarnef]

@vnv-dwarf the fix hasn't been included in latest v11 yet. A simple workaround for now is to inject a CSS via package.manifest to override the styling.

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