Component borders thin out or disappear in Safari at non-100% zoom (ring/box-shadow is not pixel-snapped by WebKit)

[aniketkatkar97]

Affected module

UI — the openmetadata-ui-core-components design system (Button, Input, Select, Checkbox, Radio, Toggle, Tags, Tabs, Badges, Table, popovers/dropdowns) and its consumers in openmetadata-ui.

Describe the bug

In Safari, the borders of form fields and other bordered components visibly thin out — and at some zoom levels disappear entirely — whenever the page is at a zoom level other than 100%. The same components render correctly in Chrome, which is why this presents as a Safari-only defect.

The cause is that the design system does not draw these borders with a real border. It uses Tailwind's ring-* utilities, which compile to a box-shadow. WebKit does not pixel-snap box-shadows to whole device pixels, so at a fractional device pixel ratio (e.g. devicePixelRatio: 1.7, which Safari reports at 85% zoom on a Retina display) a 1px ring cannot occupy a whole number of device pixels. It gets antialiased across two columns and renders washed out, or not at all. A real border and an outline are both snapped and never degrade.

It is not strictly Safari-only — Chromium degrades rings too, it just never falls far enough to be noticed. Peak border darkness sampled from rendered pixels across a 50–150% zoom sweep (42 = full strength for this border token, 0 = invisible):

	border	ring	outline
WebKit @1x	42..42	0..42 (vanishes)	42..42
Chromium @1x	42..42	21..42 (dims ~50%)	42..42
WebKit @2x	42..42	42..42	42..42

Because ring-* is the de facto border primitive across ~120 sites in the component library, this affects buttons, inputs, selects, checkboxes, radios, toggles, tags, tabs, badges, table cards, popovers and dropdowns — not a single screen.

To Reproduce

1. Open OpenMetadata in Safari on a Retina / 2x display.
2. Navigate to Settings → Services → Add New Service → BigQuery → Connect.
3. Zoom out with Cmd − to 85% (window.devicePixelRatio then reports 1.7).
4. Observe the borders of the form fields (Service Name, GCP Credentials Configuration, Project ID).

Confirmed independently with a side-by-side harness in real Safari: an element using border: 1px solid never changes at any zoom, while an identical element using box-shadow: inset 0 0 0 1px (what ring-1 ring-inset compiles to) thins when zoomed out. An element using outline: 1px solid; outline-offset: -1px is indistinguishable from the real border at every zoom.

Expected behavior

Borders render at a consistent, full-strength 1px at every zoom level in Safari — matching Chrome, and matching the behaviour of a real border — with no visual change whatsoever at 100% zoom.