Проблема переполнения в хроме и опера

У меня проблема с overflow на 0px height width в новых версиях

мой исходный код ( jsfiddle)

код работал хорошо раньше, но у меня есть эта проблема в последнем хроме и опера (не в 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>

Ответ 1