safari-specific-debugging

Safari-Specific Debugging

Use this skill when something works in other browsers but breaks in Safari, or when debugging WebKit-specific behavior.

Common Safari issues and how to debug them

CSS issues

Start by running check_webkit_compatibility — it checks every CSS property on the page against the live Safari session via CSS.supports() and reports what is actually broken (unsupported properties, missing -webkit- prefixes):

check_webkit_compatibility

For specific elements, inspect computed styles directly:

get_computed_style uid="<element-uid>" properties=["display", "gap", "aspect-ratio", "container-type", "backdrop-filter"]

Common Safari CSS gotchas:

• -webkit-backdrop-filter: Still requires prefix in Safari <18.
• 100vh on iOS Safari includes the address bar — use 100dvh instead.
• position: sticky inside overflow: auto containers often breaks.
• :has() selector: Safari was first to ship it, but edge cases may differ.

JavaScript issues

Run diagnostics with evaluate_script:

evaluate_script function="() => {
  return {
    userAgent: navigator.userAgent,
    webkitVersion: navigator.userAgent.match(/AppleWebKit\/(\d+)/)?.[1],
    features: {
      structuredClone: typeof structuredClone !== 'undefined',
      requestIdleCallback: typeof requestIdleCallback !== 'undefined',
      offscreenCanvas: typeof OffscreenCanvas !== 'undefined',
      webComponents: typeof customElements !== 'undefined',
      resizeObserver: typeof ResizeObserver !== 'undefined',
      intersectionObserver: typeof IntersectionObserver !== 'undefined'
    }
  };
}"

Known Safari JS quirks:

• requestIdleCallback: Not available — use setTimeout fallback.
• OffscreenCanvas: Partial support — 2d context only, no WebGL.
• Date parsing: new Date('2024-01-15') works, but new Date('01-15-2024') may fail. Always use ISO 8601.
• fetch with keepalive: Stricter size limits than Chrome.
• Web Locks API: Not supported in older Safari versions.
• <input type="date">: Renders differently. Check with take_snapshot.