케이스 ce-0089-contenteditable-with-css-contain-ko · 시나리오 scenario-css-contain

CSS contain 속성이 contenteditable 선택에 영향을 줄 수 있음

OS: Windows 11 기기: Desktop or Laptop Any 브라우저: Chrome 120.0 키보드: US 초안
css-containselectionchromewindows

현상

contenteditable 요소나 그 부모에 CSS contain 속성이 있을 때 선택 동작이 영향을 받을 수 있습니다. 선택이 포함된 요소를 넘어 확장되지 않을 수 있으며, 캐럿 이동이 제한될 수 있습니다.

재현 예시

  1. contain: layout style paint가 있는 contenteditable div를 만듭니다.
  2. 요소 경계를 넘어서는 텍스트를 선택하려고 시도합니다.
  3. 요소 외부로 캐럿을 이동하려고 시도합니다.
  4. 선택 및 캐럿 동작을 관찰합니다.

관찰된 동작

  • Windows의 Chrome에서 CSS contain이 선택을 제한할 수 있습니다.
  • 선택이 포함된 경계를 넘어 확장되지 않을 수 있습니다.
  • 캐럿 이동이 제한될 수 있습니다.
  • 선택 범위가 무효화될 수 있습니다.

예상 동작

  • CSS contain이 contenteditable 선택에 영향을 주지 않아야 합니다.
  • 또는 동작이 명확하게 문서화되어야 합니다.
  • 선택이 포함된 요소 내에서 정상적으로 작동해야 합니다.

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: Windows 11
Device: Desktop or Laptop Any
Browser: Chrome 120.0
Keyboard: US
Your environment
Sample HTML:
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.