์ผ€์ด์Šค ce-0094 ยท ์‹œ๋‚˜๋ฆฌ์˜ค scenario-css-mix-blend-mode

CSS mix-blend-mode may affect contenteditable text rendering

OS: Windows 11 ๊ธฐ๊ธฐ: Desktop or Laptop Any ๋ธŒ๋ผ์šฐ์ €: Firefox 120.0 ํ‚ค๋ณด๋“œ: US ์ดˆ์•ˆ
css-mix-blend-moderenderingfirefoxwindows

์ด ํŽ˜์ด์ง€๋Š” ์•„์ง ๋ฒˆ์—ญ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค

ํ˜„์žฌ ์˜์–ด ์›๋ฌธ์„ ํ‘œ์‹œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒˆ์—ญ์— ๊ธฐ์—ฌํ•ด ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Phenomenon

When a contenteditable element has CSS mix-blend-mode applied, text rendering may be affected. Text may appear with incorrect colors, selection may not be visible, and caret may not render correctly.

Reproduction example

  1. Create a contenteditable div with mix-blend-mode: multiply over a colored background.
  2. Type text and observe color rendering.
  3. Select text and observe selection visibility.
  4. Observe caret rendering.
  5. Compare with a contenteditable without mix-blend-mode.

Observed behavior

  • In Firefox on Windows, mix-blend-mode may affect text rendering.
  • Text colors may be incorrect.
  • Selection may not be visible.
  • Caret may not render correctly.

Expected behavior

  • mix-blend-mode should not affect text readability.
  • Selection should be visible.
  • Caret should render correctly.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Windows 11
Device: Desktop or Laptop Any
Browser: Firefox 120.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.