Проблема с Microsoft Edge

Question

когда я зависаю на карточке, карта переворачивается, и в браузере Chrome все нормально.но в Microsoft Edge изображение также видно и переворачивается.

.main{
  width:500px;
  height:500px;
  border: 1px solid red;

  padding:30px;
}

.first{
    display:flex;
  flex-direction:column;
  // justify-content:center;
  align-items:center;
  img{
    width:200px;
    border-radius:50%;
    margin-top: -50px;
  }
}
.second{
  color:blue;
}


//Need to provide override height and width of flip__card class
.flip__card {

  position: relative;

  &:hover &-front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }

  &:hover &-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  &-front {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    transform: rotateY(0deg);

  }

  &-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

<div class="main flip__card">
  <div class="first flip__card-front">
    <div><img src="https://static.pexels.com/photos/221471/pexels-photo-221471.jpeg" width="200px" height="200px">
  </div>
    <div>
      Dummy text
    </div>
    <div>
    
  <div class="second flip__card-back">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem voluptatem mollitia eius veniam consectetur? Necessitatibus cumque obcaecati, laboriosam minima doloremque quod odit! Quo cupiditate dolorum explicabo laborum, iste tenetur rem.
  </div>
  
</div>

Таким образом, при наведении курсора на карту, в браузере ME изображение также видно, и оно находится в перевернутом положении.в то время как я не использую изображения на обратной стороне карты.

Answer 1

Проверено на Microsoft Edge и все работает.Я думаю, что ваша ошибка связана с простыми ошибками HTML.Убедитесь, что все ваши div теги закрыты правильно и в нужном месте, я не думаю, что вы хотите, чтобы .card-back был помещен в .card-front.

.main{
  width:500px;
  height:500px;
  border: 1px solid red;
  padding:30px;
}

.first{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.first img {
  width:200px;
  border-radius:50%;
  margin-top: -50px;
}

.second{
  color:blue;
}

.flip__card {
  position: relative;
}

.flip__card:hover .flip__card-front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip__card:hover .flip__card-back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip__card-front {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  transform: rotateY(0deg);

}

.flip__card-back {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<div class="main flip__card">

  <div class="first flip__card-front">
    <div><img src="https://static.pexels.com/photos/221471/pexels-photo-221471.jpeg" width="200px" height="200px"></div>
    <div>Dummy text</div>
  </div>
   
  <div class="second flip__card-back">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem voluptatem mollitia eius veniam consectetur? Necessitatibus cumque obcaecati, laboriosam minima doloremque quod odit! Quo cupiditate dolorum explicabo laborum, iste tenetur rem.
  </div>
  
</div>