WebKit边界半径和转换错误 [英] WebKit border radius and transition bug

问题描述

在最新的稳定版本的谷歌Chrome浏览器：版本31.0.1650.63 m（加那利）也有一个错误，当有一个边界半径和转换涉及。
应用了边框半径的元素内的内容在动画结束之前不会被截断。

In the latest stable release of Google Chrome: Version 31.0.1650.63 m (Canary also) there is still a bug when there is a border radius and transition involved. Content inside the element that has a border radius applied doesn't get clipped until the end of the animation.

我已经设法通过转换top和left属性而不是translateX / translateY

I've managed to work it out by transitioning "top" and "left" properties instead of translateX / translateY

http://codepen.io/iki_xx/pen/wCFuo

然而，我似乎找不到替代动画的不透明度。

However I can't seem to find a substitute for animating opacity.

http://codepen.io/iki_xx/ pen / mspgE

有不透明度修复吗？

推荐答案

您可以通过以下两种方式修复它：

You can fix it 2 ways:

  .thumb {
    position:relative;
    overflow: hidden;
    width:100%;
    border: 10px solid red;
    border-radius:55px;
    &:hover {

        .caption {
       background-color:red;
        }
      }
  }
  .caption {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
       background-color:transparent;
        border-radius: 35px;
    @include transition(all 3s ease-in-out);
  }

a）在内部元素中设置边框半径

a) setting border radius in the inner element

b）设置background-color：透明并转换

b) setting background-color: transparent and transitioning that

这篇关于WebKit边界半径和转换错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！