css - Chrome 和 Opera 中的溢出问题

Question

我在新版本的 0px height width 元素上遇到了 overflow 的问题

我的源代码(jsfiddle)

代码之前运行良好，但我在最新的 chrome 和 opera 中遇到了这个问题(在 firefox 和 edge 中没有)

CSS:

.cssload-dots {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    outline: 1px solid red;
    filter: url(#goo);
        -o-filter: url(#goo);
        -ms-filter: url(#goo);
        -webkit-filter: url(#goo);
        -moz-filter: url(#goo);
}

当我将 width 和 height 更改为 200px 时，一切正常...

但是我不能改变这个...

因为我在我的所有网站页面上都使用了这段代码，如果我更改它，可能会损坏所有其他部分

编辑:

当我通过检查元素禁用过滤器时，一切正常...

也许 svg 过滤器有问题，但我对 svg 一无所知

编辑:

我改变了 svg，它更好但还不够

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

Answer 1

这是谷歌浏览器的一个错误...

我报告过，它将在新版本中修复