Хром и некоторые другие браузеры некорректно отображают спозиционированный элемент внутри родителя в зависимости от размеров элементов и масштаба
Есть такой код:
.wrap{
width: 40px;
height: 40px;
border: 1px solid #dcdddc;
position: relative;
overflow: hidden;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
background-color: #0a0047;
width: 10px;
height: 10px;
position: relative;
z-index: 1;
transition: 0.5s;
}
.wrap::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #0a0047;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.5s;
}
.wrap:hover{
border: 1px solid #0a0047;
}
.wrap:hover::before{
transform: scaleY(1);
}
.wrap:hover .inner{
background-color: #fff;
}<div class="wrap">
<div class="inner"></div>
</div>При наведении на элемент с классом wrap в зависимости от размеров самого элемента, в зависимости от масштаба страницы и тд. могут быть баги которые выглядят вот так
.
Причём не обязательно делать именно при наведении, можно просто спозиционировать, результат может быть такой же. Я пробовал задавать ширину и высоту псевдоэлемента больше родителя, задавать отрицательные left, top, right, bottom. Это не помогает, белые просветы могут возникать хаотично по разным сторонам. Замена псевдоэлемента на див не помогает. Даже если убрать позиционирование ничего не изменится, хотя нужно, чтобы элемент был спозиционирован. Единственное, что иногда помогает, это замена бордера на тень, но это не всегда то, что нужно. Подскажите, пожалуйста, как с этим можно бороться?