kimho.net

크롬 114 버전부터 popover API 라는걸 지원하게 되었습니다.
Popover API는 웹 개발자가 웹 페이지에 popover 위젯을 추가할 수 있도록 하는 Web API입니다. popover는 사용자가 웹 요소에 마우스를 가져갈 때 나타나는 작은 텍스트 콘텐츠 블록입니다. Popover API를 사용하면 popover의 위치, 크기 및 콘텐츠를 제어할 수 있습니다.

그런데 문제는 기존 라이브러리 소스들 중에 popover라는 태그 속성을 쓰는 라이브러리들과 이름이 충돌하는 바람에 UI가 깨지는 현상들이 발생하고 있습니다.

아래 이슈들을 보면 해당 문제들을 보실 수 있습니다.
https://support.google.com/chrome/thread/218644651/bug-after-updating-google-chrome-to-version-114-0-5735-90?hl=en
https://github.com/flaming-cl/editorjs-text-color-plugin/issues/21

이 문제를 해결하려면, 사이트에서 공통으로 사용하는 css에 아래와 같은 코드를 추가해주어야 합니다.

[popover] {
  display: initial;
  position: initial;
  margin: initial;
  border: initial;
  background: initial;
  padding: initial;
  width: initial;
  height: initial;
  overflow: initial;
  inset: initial;
  color: initial;
}