Тень дрожит при перемещении курсора к границе рамки

Question

Сначала вы должны взглянуть на конечный эффект ; это трудно описать. Кажется идеальным, но есть небольшая проблема.

Когда ваш курсор перемещается близко к левой границе квадрата очень маленькими шагами, белая тень также сильно дрожит.

Как я могу это исправить?

Answer 1

Вы должны добавить overflow: hidden в контейнер # div.

# shadow div переполняется влево, расширяя область hoverable от его родителя.

#container{
   position: relative;
   margin: 0 auto;
   width: 200px;
   height: 200px;
   overflow: hidden;
}