search

web-platform-tests / interop

web-platform-tests Interop project
https://wpt.fyi/interop
318 stars 27 forks source link

Consistent color for ridge/groove borders #751

Open chriskirknielsen opened 1 month ago

chriskirknielsen commented 1 month ago

Description

When using the special 3D-esque border-style values of ridge or groove, browsers render them with very inconsistent shifts in color when using darker colors:

Firefox

border render in Firefox, very dark all around Remains close to the source color, the effect being subtle for darker colors

Chrome

border render in Chrome, the colors contrast a lot Pushes to the extremes for the light and dark versions, creating a sharp contrast

Safari

border render in Safari, colors are significantly brighter than the source value Brightens the color a lot before creating a slightly darker and lighter version

In my tests, I am using a dark brown (#2f1913), where this difference is very noticeable. However, if you use a native red value, it looks consistent across all 3 major browsers.

You can check the result in this demo: [interop issue] ridge and groove border-style cross-browser differences (update the --c property to change the colors).

Obviously, this is a very low priority, but it still would be nice to get consistency across browsers!

Specification

W3C

Additional Signals

No response

chriskirknielsen commented 1 month ago

Potentially slightly related: #713

jsnkuhn commented 1 month ago

Not ridge/grove/inset/outset related but found out Safari still doesn't have circular dotted borders for border-style: dotted; It also breaks pretty badly when you add a border-radius above 6px.

(FYI, I remember Chrome having these same issues at one point but they have since been fixed)

https://codepen.io/jsnkuhn/pen/MWNYYMZ

image

nt1m commented 1 month ago

There is no standard for this yet, see: https://github.com/w3c/csswg-drafts/issues/9393

chriskirknielsen commented 1 month ago

@nt1m Oh thank you for sharing, I had not seen this… thought I might be the only person to have tried to use these border styles in this century haha. (I see we both ran into this issue while making our websites 😅)

nt1m commented 1 month ago

I implemented the WebKit algorithm to honor the border-color with 3D styles and I'm also disappointed by the lack of standard. Happy to align to whatever algorithm ends up being standardized.