Webkit Filter Transition Bugs

HTML

<body>
<h2>Filter transitions breaking border-radius clipping</h2>
<div class="parent1">
  <div class="child1">
  </div>
</div>
<div style="width:1px; height:20px;"></div>
<h3>Using clip-path as workaround:</h3>
<h2>Blur filter using parent colours for edges during transition</h2>
<div class="parent2">
  <div class="child2">
  </div>
</div>
<div style="width:1px; height:20px;"></div>
<h3>overflow: visible with visualisation of clipping bounds</h3>
<div class="parent3">
  <div class="child2">
  </div>
  <div class="clipping-bounds">
  </div>
</div>
</body>

CSS

body {
  background: #7f7;
}

.parent1 {
  width: 144px;
  height: 144px;
  border-radius: 13px;
  overflow: hidden;
}

.child1 {
  width: 160px;
  height: 160px;
  position: relative;
  left: -8px;
  top: -8px;
  background: url(http://taigaak.org/charlesjsharp.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.parent1:hover .child1 {
  filter: brightness(25%);
  transition: all 1s ease-in-out; 
}

.parent2 { 
  width: 144px;
  height: 144px;
  clip-path: inset(0 0 0 0 round 13px);
  overflow: hidden;
}

.child2 {
  width: 160px;
  height: 160px;
  position: relative;
  left: -8px;
  top: -8px;
  background: url(http://taigaak.org/charlesjsharp.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.parent2:hover .child2, .parent3:hover .child2 {
  filter: blur(4px);
  transition: all 1s ease-in-out; 
}

.parent3 { 
  width: 144px;
  height: 144px;
  overflow: visible;
}

.clipping-bounds {
  width: 144px;
  height: 144px;
  position: relative;
  top: -160px;
  border-radius: 13px;
  border: 1px solid #000;
}