Проблема с раскладкой столбца Chrome с возможностью перехода в iframe

Question

Я помещал видео (в) в макет 3 столбцов, используя «count-count 3». И каждый раз, когда я нажимаю кнопку воспроизведения на втором или третьем видео сверху, я получил это, прыгнув в нижнюю часть предыдущего столбца. Это происходит только в Chrome. В Firefox это прекрасно, как ожидалось.

Я попытался применить все советы относительно похожих вопросов, которые я нашел в StackOverflow, однако ни один из них не работает для меня (включая добавление свойства перевода в контейнер для упаковки). Не могли бы вы мне помочь?

Вот мой код (Jade):

  .column-list.column-list--three 
      each video in content['pausecast'] 
        +video-panel(video) 

---

mixin video-panel(obj) 
.video-panel 
    .aspect-ratio 
     iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=','')) 

---

.aspect-ratio 
    position relative 
    width 100% 
    height 0 
    padding-bottom 51% 
    // transform translate3d(0,0,0) 


.aspect-ratio iframe 
    position absolute 
    width 100% 
    height 100% 
    left 0 
    top 0 

.video-panel 
    border-bottom grey 2px solid 
    margin-bottom 40px 

Я определенно не может пойти на любые фиксированные высоты или ширины, как мне это нужно, чтобы быть гибким при изменении размера + сохранение правильного соотношения сторон. Поэтому применяемые изменения должны быть сведены к минимуму насколько это возможно. Заранее спасибо!

Answer 1

Ну, решение, которое сработало для меня, состояло в том, чтобы избавиться от количества столбцов и вместо этого использовать другую сетку. Используется Jeet и col (4/12, цикл: 3). Вот и все. Очень странное поведение столбца-столбца + позиция абсолютная.