IE 10-11, баг position:absolute

191
07 мая 2018, 21:00

Столкнулся с проблемой верстки секции преимуществ в IE10-11. Баг со свойством position: absolute

В IE это выглядит вот так:

Код:

.advantages .tile { 
position:relative; 
display:flex; 
justify-content:center; 
align-items:center; 
height:235px; 
border-right:1px solid #e8e8e8; 
border-bottom:1px solid #e8e8e8; 
} 
.advantages .tile:hover .icon { 
fill:#3fd1fa; 
} 
.advantages .tile:hover .tile__text-wrapper h4 { 
color:#3fd1fa; 
} 
.advantages .tile:nth-child(4), 
.advantages .tile:nth-child(8) { 
border-right:0; 
} 
.advantages .tile:nth-child(5),  
.advantages .tile:nth-child(6), 
.advantages .tile:nth-child(7), 
.advantages .tile:nth-child(8) { 
border-bottom:0; 
} 
.advantages .tile__inner { 
position:absolute; 
z-index:1; 
display:flex; 
flex-direction:column; 
justify-content:center; 
align-items:center; 
width:315px; 
height:235px; 
transition:all .25s ease; 
} 
.advantages .tile:hover .tile__inner { 
width:335px; 
height:260px; 
background-color:#fff; 
box-shadow:0 0 23px 3px rgba(70,70,70,.085); 
border-radius:6px; 
} 
.advantages .tile__icon-wrapper { 
height:120px; 
} 
.advantages .tile__icon-wrapper .icon{ 
width:60px; 
stroke-width:0; 
fill:#8e8e8e; 
transition:all .15s ease; 
} 
.advantages .tile__icon-wrapper .icon-direct-customer { 
width:85px; 
} 
.advantages .tile__icon-wrapper .icon-handshake { 
width:75px; 
} 
.advantages .tile__icon-wrapper .icon-computer-secure { 
margin-top:-8px; 
} 
.advantages .tile__text-wrapper h4 { 
color:#8b8b8b; 
font-size:18px; 
font-weight:400; 
line-height:22px; 
text-transform:uppercase; 
text-align:center; 
transition:all .25s ease; 
}
<div class="container advantages"> 
  <div class="row advantages__list"> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-teamwork"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-teamwork"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Перевірені<br> роботодавці</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-direct-customer"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-direct-customer"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Підготовка<br> до співбесіди</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <div class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-handshake"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-handshake"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Безкоштовна допомога<br> у працевлаштуванні</h4> 
        </div> 
      </div> 
    </div><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-database"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-database"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Онлайн-реєстрація<br> в базі</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-graphic"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-graphic"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>SWOT-аналіз<br> кар’єри</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-financial"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-financial"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Планування<br> кар’єри</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-computer-secure"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-computer-secure"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>Конфіденційність</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
    <article class="tile col-lg-3"> 
      <div class="tile__inner"> 
        <div class="tile__icon-wrapper"> 
          <svg class="icon icon-quality"><use xlink:href="img/people-page/advantages-icons/advantages-icons.svg#icon-quality"></use></svg> 
        </div> 
        <div class="tile__text-wrapper"> 
          <h4>6 років<br> на ринку</h4> 
        </div> 
      </div> 
    </article><!-- /.tile col-lg-3 --> 
  </div><!-- /.row advantages__list --> 
</div><!-- /.container -->

Какие могут быть проблемы или как их обойти?

Answer 1

Оставлю это как идею: Вместо увеличения размеров контейнера, можно использовать псевдоэлемент, который и будет выполнять функцию визуализации наведения на блок. Как анимация расширения блока будет использовать трансформация с параметром scale. Трансформация лучше работает с FPS, чем динамическое увеличение ширины/высоты. Работает в IE11:

@import url("https://fonts.googleapis.com/css?family=Montserrat"); 
* { 
  box-sizing: border-box; 
} 
 
.grid { 
  font-family: 'Montserrat', sans-serif; 
  display: flex; 
  flex-wrap: wrap; 
  max-width: 1200px; 
  margin: 30px auto; 
  font-size: 14px; 
} 
.grid > .item { 
  font-size: 1.25em; 
  flex: 1 1 24%; 
  border-right: 1px solid #e8e8e8; 
  border-bottom: 1px solid #e8e8e8; 
  height: 200px; 
} 
.grid > .item .inner { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  width: 100%; 
} 
.grid > .item .inner:after { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  opacity: 0; 
  -webkit-transform: scale(1); 
          transform: scale(1); 
  box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.15); 
  background-color: white; 
  transition: .3s; 
} 
.grid > .item .inner span { 
  display: block; 
  position: relative; 
  z-index: 3; 
} 
.grid > .item:hover .inner:after { 
  opacity: 1; 
  -webkit-transform: scale(1.1); 
          transform: scale(1.1); 
} 
.grid > .item:nth-child(4), .grid > .item:nth-child(8) { 
  border-right: 0; 
} 
.grid > .item:nth-child(5), .grid > .item:nth-child(6), .grid > .item:nth-child(7), .grid > .item:nth-child(8) { 
  border-bottom: 0; 
}
<div class="grid"> 
	<div class="item"> 
		<div class="inner"><span>Some text #1</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #2</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #3</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #4</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #5</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #6</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #7</span></div> 
	</div> 
	<div class="item"> 
		<div class="inner"><span>Some text #8</span></div> 
	</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Создание error_204
HTML

Создание error_204

Необходимо открытие окна авторизации с помощью ошибки 204 или редиректа 302В этой теме говорится об этом https://android

 184
CSS блок по центру экрана
HTML

CSS блок по центру экрана

Я хочу разместить блок точно по центру экрана (по горизонтали)Для этого я написал нужные стили для

 204
Центрирование Google Captcha
HTML

Центрирование Google Captcha

Не помогаютКак сделать капчу по центру?

 197
Увеличение textarea по мере заполняемости - javascript
HTML

Увеличение textarea по мере заполняемости - javascript

Как можно увеличить textarea по мере заполняемости с помощью javascript?

 193