Chromium 中存在渲染 css 转换转换的错误

Question

我在 Chromium 中发现了一个错误。

似乎引擎在某种特殊层中渲染过渡。部分溢出 border-radius 的内容应该被隐藏，但实际上没有。

看这个例子：http://jsbin.com/nijavunoqe/1/edit?html,css,output

将鼠标悬停在彩色方块上。您会注意到虽然动画角是可见的。而且它会影响邻居元素。 Firefox 和 IE 都可以。

因此，问题是：是否有可能找到解决此错误的方法并使其按预期工作？

Answer 1

.container
  border: 1px solid red
  width: 200px
  height: 200px
  border-radius: 20px
  overflow: hidden

  margin-bottom: 10px

img
  height: 220px
  width: 220px
  margin-top: -10px
  margin-left: -10px
  cursor: pointer
  transition: width 1s, height 1s, margin-top 1s, margin-left 1s

  &:hover
    height: 240px
    width: 240px
    margin-top: -20px
    margin-left: -20px

您可以同时使用此代码 chrome。我什至从未注意到那些转换被破坏得一塌糊涂。

请注意，我将您的 .content 更改为 img。它不能直接与 .container 一起使用，但我相信您可以从这里对其进行调整。

Chromium 中存在渲染 css 转换转换的错误

Bug in Chromium with rendering css transformation transition

css

overflow

css-transitions

chromium

css-transforms