[해결] 크롬 114 버전에서 popover API 때문에 editor.js, ionic 등등의 라이브러리들에서 UI 깨지는 문제

11개월 전

크롬 114 버전부터 popover API 라는걸 지원하게 되었습니다.
Popover API는 웹 개발자가 웹 페이지에 popover 위젯을 추가할 수 있도록 하는 Web API입니다. popover는 사용자가 웹 요소에 마우스를 가져갈 때 나타나는 작은 텍스트 콘텐츠 블록입니다. Popover API를 사용하면 popover의 위치, 크기 및 콘텐츠를 제어할 수 있습니다.
<br>
그런데 문제는 기존 라이브러리 소스들 중에 popover라는 태그 속성을 쓰는 라이브러리들과 이름이 충돌하는 바람에 UI가 깨지는 현상들이 발생하고 있습니다.
<br>
아래 이슈들을 보면 해당 문제들을 보실 수 있습니다.
[https://support.google.com/chrome/thread/218644651/bug-after-updating-google-chrome-to-version-114-0-5735-90?hl=en](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](https://github.com/flaming-cl/editorjs-text-color-plugin/issues/21)
<br>
이 문제를 해결하려면, 사이트에서 공통으로 사용하는 css에 아래와 같은 코드를 추가해주어야 합니다.

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

popover api chrome

231

sonaki84

11개월 전

댓글 0

아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)

뎁스노트 앱으로 보시겠습니까?