Case ce-0093 · Scenario scenario-css-backdrop-filter

CSS backdrop-filter may cause rendering issues in contenteditable

OS: iOS 17.0 Device: iPhone Any Browser: Safari 17.0 Keyboard: US Status: draft
css-backdrop-filter rendering mobile ios safari

Phenomenon

When a contenteditable element has CSS backdrop-filter applied, rendering may be affected. Text may appear blurry, selection may not render correctly, and performance may be degraded, especially on mobile devices.

Reproduction example

  1. Create a contenteditable div with backdrop-filter: blur(10px).
  2. Type text and observe rendering quality.
  3. Select text and observe selection rendering.
  4. Scroll the contenteditable and observe performance.
  5. Test on a mobile device.

Observed behavior

  • In Safari on iOS, backdrop-filter may cause rendering issues.
  • Text may appear blurry or distorted.
  • Selection may not render correctly.
  • Performance may be poor, especially on mobile.

Expected behavior

  • backdrop-filter should not affect text rendering quality.
  • Selection should render correctly.
  • Performance should remain acceptable.

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: iOS 17.0
Device: iPhone Any
Browser: Safari 17.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.