При наведении курсора на элемент с тенью и переходом возникают проблемы с переполнением - PullRequest
Новая
       25

При наведении курсора на элемент с тенью и переходом возникают проблемы с переполнением

0 голосов
/ 11 ноября 2019

В Microsoft Edge при наведении курсора на эффект перехода вы можете видеть, что перекрывающиеся участки div-элементов мерцают, несмотря на то, что установлено значение overflow: hidden. Довольно странно, и это не отображается на других браузерах и платформах, которые я проверял. Проверьте ссылку на коде. Я включил наиболее релевантные фрагменты кода только для быстрого ознакомления, но фрагмент здесь не покажет ничего особенного.

Вот наиболее подходящий код: 

.test01 .test01w2 {
    position: relative;
    float: left;
    width: 22.457627118644%;
    padding-top: 22.457627118644%;
    margin: 0 0 0 03.389830508475%;
    overflow: hidden;
    background-color: #f0f;
    box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1), -2px 2px 22px 0px rgba(0,0,0,0.2);
}
.test01 .test01w3 {
    color: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    z-index: 2;
}
.test01 .test01w3 ~ .test01triangle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    background-color: rgba(0,0,0,.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    transform: rotate(-45deg) translate(0%,103%) scale(3, 1);
    height: 100%;
    width: 100%;
}
.test01 .test01w3:hover ~ .test01triangle {
    transform: rotate(-45deg) translate(0%,103%) scale(3, 4);
}
<div class="test01w2 bgdarkslate">
    <div class="test01w3">
        <a href="placeholder.html">
        <div class="icn-img icn-ondark icn-myaccount"></div>
        <h3>Ipsums and Lorems</h3>
        <i>&#8212;</i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </a>
    </div>
    <div class="icn-img icn-ondark icn-arrow">&nbsp;</div>
    <div class="test01triangle"></div>
</div>

Codepen

...