案例 ce-0093 · 场景 scenario-css-backdrop-filter

CSS backdrop-filter may cause rendering issues in contenteditable

操作系统: iOS 17.0 设备: iPhone Any 浏览器: Safari 17.0 键盘: US 草稿
css-backdrop-filterrenderingmobileiossafari

此页面尚未翻译

目前显示的是英文原文。欢迎您参与翻译工作。

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.