overflow issue in chrome and opera

问题

i have a problem with overflow on 0px height width elements in new versions

my source code (jsfiddle)

code worked nice before, but i have this problem in latest chrome and opera (not in firefox and 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);
}

when i change width and height to 200px , everything works nice...

but i can't change this...

because i used this code on all of my website pages and if i change that, maybe it damage all other parts

edit:

when i disable filter by inspect element, everything be ok...

maybe svg filter have a problem but i don't know anything about svg

edit:

i changed svg, it's be better but not enough

<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>