Bug 234011

Summary:

REGRESSION (Safari 15.1?): Hex values in <meta name="theme-color"> not rendering correct rgb color, used to affect etsy.com

Product:

WebKit

Reporter:

Katie Sylor-Miller <ksylor>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ap, heycam, hi, sam, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

iPhone / iPad

OS:

iOS 15

Attachments:

Description	Flags
Screenshot of the incorrect theme color from using a hex value	none
Screenshot of the correct theme color when using an rgb value in the meta tag	none

Description Katie Sylor-Miller 2021-12-08 08:41:54 PST

Created attachment 446370 [details]
Screenshot of the incorrect theme color from using a hex value

After updating to iOS 15.1, I noticed that the tab background color that is set via `<meta name="theme-color" content="#f1614e">` looked different than the same hex value applied as a background color on the Etsy.com SVG logo. I've attached an image showing the difference - you can see that the theme color looks more pinkish than the logo orange. The rgb value for the correct orange in the logo is `rgb(241, 100, 30)`, while the incorrect rgb for the theme color that is being displayed is `rgb(240, 98, 78)`.

When using the direct rgb value in the theme-color meta tag instead of hex, the color renders correctly `<meta name="theme-color" content="rgb(241, 100, 30)">` I've attached a screenshot created by manually editing the meta tag value in developer tools. 

Note that I am going to push up a code change to the production site to use an rgb value in our markup shortly, so I would expect this to no longer happen on https://www.etsy.com so it won't be reproducible.

Comment 1 Katie Sylor-Miller 2021-12-08 08:42:51 PST

Created attachment 446371 [details]
Screenshot of the correct theme color when using an rgb value in the meta tag

Comment 2 Alexey Proskuryakov 2021-12-09 09:56:41 PST

Thank you for the report! For anyone trying this, this is indeed already worked around on etsy.com.

Comment 3 Radar WebKit Bug Importer 2021-12-09 13:14:49 PST

<rdar://problem/86287478>

Comment 4 Katie Sylor-Miller 2021-12-09 13:29:52 PST

Since I've now fixed it on Etsy.com, I was curious if this was something that happened just with us or if it was more widespread, so I checked my open tabs for other sites that use a hex value for the theme-color and I noticed it happening on:

https://landsend.com
https://llbean.com

but for some reason the difference wasn't nearly as drastic as it was with our hex color.