为什么在iframe中动态添加滚动条伪类会导致浏览器崩溃？

Question

1.在html中添加一个新的iframe：

<iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe>

2.在html中添加以下js代码：

function onloadcss(iframe) {
        let idoc = iframe.contentWindow.document;
        let style = idoc.createElement("link");
        style.href = "/public-style.css";
        style.rel = "stylesheet";
        idoc.head.appendChild(style); 
  }

3.上述css文件包含的内容为：

::-webkit-scrollbar-thumb,::-webkit-scrollbar,::-webkit-scrollbar-track {
    display: none;
}

4.按F12打开控制台，按

ctrl+shift+c

或选择左上角的dom选择器。

5.将鼠标悬停在 iframe 上，浏览器 100% 都会崩溃。

演示：https://stackblitz.com/edit/web-platform-fwx6av?file=index.html

我不明白为什么会发生这种情况，我所要做的就是将上面的代码更改为以下形式之一，它就可以正常工作：

1. 直接将内联样式添加到 iframe 嵌套的

   chicken-soup/index.html

   。

2. 直接将外部 CSS 引用添加到嵌套在 iframe 中的

   chicken-soup/index.html

   。

3. 动态添加样式dom到iframe的head中。

这些情况都不会导致浏览器崩溃。

演示：https://stackblitz.com/edit/web-platform-eretyk?file=index.html

谁能告诉我为什么？

Answer 1

看起来您在 Safari 中发现了一个错误，并且您的问题是错误报告的一个很好的最低示例，所以我只能建议填写错误报告

你没有提到你在哪些浏览器中测试过这个，我从 CSS 猜测是 Safari 或 Chrome。

Apple 错误可以在 https://developer.apple.com/bug-reporting/

提出

报告 Chrome 错误 https://support.google.com/chrome/answer/95315

值得在更多浏览器中进行测试，包括制作 Firefox 版本的测试，这样您就可以将问题范围缩小到单个浏览器，或者检查它是否会影响所有基于 WebKit 的浏览器。