CSS mix-blend-mode may affect contenteditable text rendering
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Firefox 120.0 · Keyboard: US
Open case →Scenario
CSS mix-blend-mode may affect contenteditable text rendering
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.
other
Scenario ID
scenario-css-mix-blend-mode
Details
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.
References
- MDN: mix-blend-mode - mix-blend-mode CSS property
- CSS-Tricks: Methods for contrasting text backgrounds - Contrast issues
- WebKit Mailing List: mix-blend-mode bugs - WebKit rendering bugs
- MDN: caret-color - caret-color property
- CSS-Tricks: isolation - isolation property
- CSS-Tricks: mix-blend-mode almanac - Blend mode documentation
- Reddit: mix-blend-mode transform issues - Transform and blend mode problems
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0094-contenteditable-with-css-mix-blend-mode | Windows 11 | Desktop or Laptop Any | Firefox 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: firefox, windows
contenteditable inheritance behavior is inconsistent
When a parent element has contenteditable="true" and a child element has contenteditable="false", the inheritance behavior is inconsistent across browsers. Some browsers allow editing in the child, while others correctly prevent it. The behavior may also differ when the child has contenteditable="inherit" or no contenteditable attribute.
1 case
Tags: firefox, windows
Korean IME composition causes editor crash (Firefox)
On Firefox with Windows 10 and Korean IME, specific key combination during IME composition causes the editor to crash. The crash occurs when typing certain sequences with the Korean IME.
1 case
Tags: windows
autofocus attribute does not work on contenteditable
The autofocus attribute, which automatically focuses form inputs on page load, does not work on contenteditable elements. There is no built-in way to automatically focus a contenteditable region when a page loads.
1 case
Tags: firefox
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: firefox
Caret position jumps unexpectedly after pasting content
After pasting content into a contenteditable region, the caret position does not end up at the expected location, sometimes jumping to the beginning of the pasted content or to an unexpected position.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.