跳转iframe内容的Chrome列布局问题

Question

我使用“列计数3”将视频放到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)。就这样。非常奇怪的行为列计数+位置绝对。