Bug 301917 – The native checkbox error UI obscures the label and impairs visibility.

• Status: NEW
• Component: Forms

[ToT_chan_nan]

Created attachment 477284 [details]
Safari verification: Radio button display

# WebKit Bug Report: Form Validation Visibility Issue

## Summary
**iOS/WebKit: Native validation error UI for checkboxes overlaps the element and label, severely impairing visibility.**

---

## 1. Environment & Scope

### Affected Environment
* **OS/Engine:** iOS 26.0.1 (Reported Version) / WebKit
* **Hardware:** iPhone 11 (Verified on physical device)
* **Affected Elements:** Standard HTML `<input type="checkbox" required>` and `<input type="radio" required>`

### Non-Affected Environment 
* Android/Blink (e.g., Chrome) displays the error clearly.

---

## 2. Precise Steps to Reproduce

**Environment:** iOS 26.0.1 (iPhone 11) using Safari

1.  Open the following **Verification URL** in iOS Safari:
    * **Verification URL:** https://jsbin.com/pibelebire/edit?html,output
2.  Leave all required form fields empty/unselected.
3.  Click the "Submit" button to trigger the built-in form validation.
4.  **Iteratively clear errors from top to bottom:** Input valid data for the currently highlighted field, and click "Submit" again to proceed to the next error (e.g., Radio Button, then Checkbox).
5.  When the **Checkbox or Radio Button error** is highlighted, observe how the error UI obscures the element and label.

---

## 3. Actual Behavior

When validating the Checkbox/Radio Button, the following critical issues arise:

* **Severe Overlap:** The native validation error UI (tooltip) is rendered directly overlapping the input element and its adjacent label text.
* **Visual Obscurement:** The UI's semi-transparent nature causes it to visually blend with the light page background, severely reducing contrast and preventing the user from immediately recognizing the error.
* **UX Impact:** The obscuring of the label prevents the user from knowing what item needs to be fixed, conflicting with standard LTR web patterns.

---

## 4. Expected Behavior 

The error UI should not overlap or obscure the input element or its accompanying label text, and should be displayed with sufficient contrast to be instantly recognized as an error.

---

### [App Reviewer/Engineer Note]

This issue is strictly due to the WebKit native UI rendering specification and is not a fault in the application's code or design. We believe this is a platform flaw impacting general form usability.

[ToT_chan_nan]

Created attachment 477298 [details]
Safari verification: checkbox display

[ToT_chan_nan]

Created attachment 477299 [details]
Chrome verification: Radio button display(Google pixel 8a)

[ToT_chan_nan]

Created attachment 477300 [details]
Chrome verification: Radio button display(windows pc)

[Radar WebKit Bug Importer]

<rdar://problem/164465828>