[css-ui] Proposal: change outline-offset initial value to auto #13587

Activity

1. sb3nder commented on Mar 11, 2026

   

   sb3nder

   on Mar 11, 2026 · Hidden as outdated

   Author

   show commentMore actions
2. frivoal

   added

   css-ui-3

   css-ui-4Current WorkCurrent Work

   css-ui-5

   on Mar 12, 2026
3. sb3nder commented on Apr 6, 2026

   

   sb3nder

   on Apr 6, 2026

   ContributorAuthor

   More actions

   Update regarding WebKit (as of today, build 310633@main):
   for outline-style: auto:

   • outline-width is no longer taken into consideration.
   • outline-offset: 0px has an effective offset of 0px, and any other value also reflects the effective offset.
   • The rendered width should scale with zoom (I don't see this fixed in my build, but I guess it's fixed in Safari).

   Fix outline: auto in user agent style sheets WebKit#1740
   Enable zooming outline: auto WebKit#61077
   Ignore outline-width when outline-style is auto WebKit#61497

   Super happy with these changes.
4. sb3nder commented on Apr 6, 2026

   

   sb3nder

   on Apr 6, 2026

   ContributorAuthor

   More actions

   Additionally, WebKit is proposing outline-offset: inset #13765, but I'm still unsure if it's the right approach as currently proposed.
5. sb3nder

   changed the title [-][css-ui] Proposal: Allow `outline-offset` to reflect the effective offset for `outline-style: auto`[/-] [+][css-ui] Proposal: change `outline-offset` initial value to `auto`[/+] on May 25, 2026
6. sb3nder commented on May 25, 2026

   

   sb3nder

   on May 25, 2026

   ContributorAuthor

   More actions

   I gave a look at Chrome code... it's effective offset is basically:
   (All lengths are in device pixels)

   // specifiedSnappedOffset = ...
   // minBorderWidth = ...
   // effectiveZoom = devicePixelRatio * totalZoom;
   
   let offset = specifiedSnappedOffset;
   
   const maxInsideBorderWidth = Math.max(Math.floor(1 * effectiveZoom), 1);
   if (minBorderWidth >= maxInsideBorderWidth)
   	offset -= maxInsideBorderWidth;
   
   const halfInnerStrokeWidth = Math.max(Math.floor(3 * effectiveZoom), 3) / 3;
   // const innerStrokeWidth = halfInnerStrokeWidth * 2;
   offset -= halfInnerStrokeWidth;
   
   // InnerStrokeWidth is not always an integer. If effectiveZoom is between N + 0.3333... and N + 1
   // then Chrome renders blurry outlines for these values.
   
   // this offset includes the blurry part
   flooredOffset = Math.floor(offset);