Bug 234011 - REGRESSION (Safari 15.1?): Hex values in <meta name="theme-color"> not rendering correct rgb color, used to affect etsy.com
Summary: REGRESSION (Safari 15.1?): Hex values in <meta name="theme-color"> not render...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-08 08:41 PST by Katie Sylor-Miller
Modified: 2021-12-09 13:29 PST (History)
5 users (show)

See Also:


Attachments
Screenshot of the incorrect theme color from using a hex value (8.97 KB, image/jpeg)
2021-12-08 08:41 PST, Katie Sylor-Miller
no flags Details
Screenshot of the correct theme color when using an rgb value in the meta tag (11.10 KB, image/jpeg)
2021-12-08 08:42 PST, Katie Sylor-Miller
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.