WebView Crash on Safari 16.4/16.5 when using ::placeholder

[deka0106]

Description

On Safari 16.4 and 16.5, displaying a page that uses ::placeholder causes the WebView to crash.
This issue is triggered by Panda CSS's reset CSS, which uses color-mix(in srgb, currentColor, transparent).

Link to Reproduction

https://play.panda-css.com/OP_wI8H1lF

Steps to reproduce

1. Open the target page using Safari 16.4 or 16.5

JS Framework

No response

Panda CSS Version

0.53.0

Browser

Safari 16.4, 16.5

Operating System

• macOS
• Windows
• Linux

Additional Information

On Safari 16.4 and 16.5, a crash occurs in WebView when a page utilizing the ::placeholder selector is displayed.
It has been reported that using currentColor within the CSS color-mix() function on Safari 16.4/16.5 triggers this crash.

• WebKit Bugzilla: Bug 256171
• REGRESSION(259145@main): Crash when using 'currentcolor' with color-mix() in color property WebKit/WebKit#13333

The issue originates from the reset CSS, where the ::placeholder style internally uses color-mix(in srgb, currentColor, transparent).

panda/packages/generator/src/artifacts/css/reset-css.ts

Lines 70 to 74 in 465eb9c

	'::placeholder': {
	opacity: 1,
	'--placeholder-fallback': 'color-mix(in srgb, currentColor 50%, transparent)',
	color: 'var(--global-color-placeholder, var(--placeholder-fallback))',
	},

As a workaround, define a custom ::placeholder style as follows:

export default defineConfig({
  preflight: true,
  globalCss: {
    "::placeholder": {
      color: "currentColor",
      opacity: "0.5",
    },
  },
  // ...
})

[segunadebayo]

For anyone experiencing this, I recommend using the workaround above. We'll consider tweaking this in the future