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

Question

我使用“column-count 3”将视频(in)放入 3 列布局。每次当我点击顶部第二个或第三个视频的播放按钮时，它都会跳到上一列的底部。它只发生在 Chrome 中。在 Firefox 中，它如预期般完美。

我尝试应用所有关于我在 StackOverflow 上发现的类似问题的提示，但是，它们都不适合我(包括将 translate 属性添加到包装容器)。你能帮我解决这个问题吗？

这是我的代码(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)。就是这样。列数 + 绝对位置的非常奇怪的行为。