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
- Create a contenteditable div with
mix-blend-mode: multiplyover a colored background. - Type text and observe color rendering.
- Select text and observe selection visibility.
- Observe caret rendering.
- 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.