Почему радиус границы влияет на тень блока?

Question

Пожалуйста, рассмотрите следующий CSS:

div {
  background: rgba(0,0,0,.05);
  width: 200px;
  height: 200px;
  padding: 50px;
}

div > div {
  background: rgba(0,0,0,.2);
  width: 200px;
  height: 200px;
  border-radius: 5px;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
}

div > div:hover {
  border-radius: 5px 5px 0 0;
  background: rgba(0,0,255,.2)
}

со следующим HAML:

%div
  %div

При наведении курсора на внутренний элемент изменяется радиус границы, а также цвет фона,Тем не менее, это также влияет на тень коробки.Этого не должно быть.Пожалуйста, посмотрите фрагмент ниже:

https://codepen.io/anon/pen/yGvydK?editors=1100

Как это можно объяснить?Это ошибка в Google Chrome?Похоже, что это не происходит в Firefox, IE или Edge.Я запускаю Chrome версии 71.0.3578.98 на 64-битном ноутбуке с Windows 10.

РЕДАКТИРОВАТЬ

Поведение в Chrome (неверно):

Обратите внимание, как тень внезапно выглядит по-разному слева, сверху и справа при наведении.

РЕДАКТИРОВАТЬ 2

Поведение в Firefox 64.0 (правильно):

Answer 1

Похоже, что это была ошибка в Chrome 71. Обновление до Chrome 72 решило проблему.