Bug 280380

Summary:

Disabled button dark mode bezel indiscernible in Mobile Safari extension popup window

Product:

WebKit

Reporter:

Jeff Johnson <opendarwin>

Component:

WebKit Extensions

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

timothy, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 18

Hardware:

iPhone / iPad

OS:

iOS 18

Attachments:

Description	Flags
Sample Safari extension demonstrating the bug	none
Screenshot of the bug	none

Jeff Johnson

Reported 2024-09-25 18:40:47 PDT

Created attachment 472683 [details] Sample Safari extension demonstrating the bug The bezel of an an HTML button element is nearly impossible to discern in dark mode in a Mobile Safari extension popup window. This bug does not occur in a regular Safari tab. It also doesn't occur on macOS. Attached is a sample Safari extension Xcode project, as well as a screenshot of the Safari extension running. The top of the screenshot shows the extension's Settings, opened from the Safari Extensions section of the Settings app. The bottom of the screenshot shows the extension's popup window, which is the exact same HTML, opened from the address bar contextual menu in Safari. Notice how the disabled button's bezel is visible at the top but not at the bottom. If you zoom in closely on the bottom of the screenshot, you can just barely see the disabled button's bezel.

Attachments
Sample Safari extension demonstrating the bug (333.68 KB, application/zip) 2024-09-25 18:40 PDT, Jeff Johnson	no flags	Details
Screenshot of the bug (70.10 KB, image/png) 2024-09-25 18:42 PDT, Jeff Johnson	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2024-09-25 18:41:01 PDT

<rdar://problem/136722010>

Jeff Johnson

Comment 2 2024-09-25 18:42:03 PDT

Created attachment 472684 [details] Screenshot of the bug

Jeff Johnson

Comment 3 2025-10-12 10:14:14 PDT

I think the reason is that the color Canvas is rgb(29, 28, 30) in the extension popup window but rgb(0, 0, 0) in a Safari tab. The button background-color is rgb(29, 29, 31) in both, but that's almost identical to the Canvas color in the extension popup window.

Note You need to log in before you can comment on or make changes to this bug.