์ผ€์ด์Šค ce-0090 ยท ์‹œ๋‚˜๋ฆฌ์˜ค scenario-css-isolation

CSS isolation property may affect contenteditable stacking context

OS: macOS 14.0 ๊ธฐ๊ธฐ: Desktop or Laptop MacBook Pro ๋ธŒ๋ผ์šฐ์ €: Safari 17.0 ํ‚ค๋ณด๋“œ: US ์ดˆ์•ˆ
css-isolationstacking-contextsafarimacos

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

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

Phenomenon

When a contenteditable element has the CSS isolation: isolate property, it creates a new stacking context. This may affect how selection handles and IME candidate windows are positioned relative to the contenteditable.

Reproduction example

  1. Create a contenteditable div with isolation: isolate.
  2. Use an IME to compose text.
  3. Observe the position of the IME candidate window.
  4. Try to select text and observe selection handles.
  5. Compare with a contenteditable without isolation.

Observed behavior

  • In Safari on macOS, isolation may affect IME candidate window positioning.
  • Selection handles may be positioned incorrectly.
  • Z-index stacking may be affected.
  • Overlays may not appear correctly.

Expected behavior

  • CSS isolation should not affect contenteditable UI elements.
  • IME candidate windows should be positioned correctly.
  • Selection handles should appear in the right place.

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: macOS 14.0
Device: Desktop or Laptop MacBook Pro
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.