移动端与border-radius有关的bug

1. Andriod 4.2.x下明明设置了border-radius,但是背景色会溢出

  • 代码和效果如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .demo {
            width: 200px;
            height: 40px;
            border: 1px solid #000;
            background: pink;
            border-radius: 20px;
            overflow: hidden;
           color: #36e;
        }
        </style>
    </head>
    <body>
        <div class="demo">test</div>
    </body>
    </html>
    
  • 想要实现的效果:

border-radius没有bug的效果

  • 但是,在部分的机型下,如图:

border-radius有bug的效果

  • 说明:
    背景颜色就溢出了,但是border还是正常实现的。用了overflow: hidden;都不行。

  • 解决办法:

     -webkit-background-clip: padding-box;
             background-clip: padding-box;
    
  • 原理

    background-clip是指背景的显示区域。

  • 可能的值:

    border-box(默认):背景延伸到边框外沿。
    padding-box:背景延伸到内边距外沿。
    content-box:背景裁剪到内容区外沿。
    inherit

    在这个例子中,溢出部分属于边框以外,需要显示的部分则是边框以内,所以用的是background-clip: padding-box;这个属性。

  • background-clip兼容性

    具体请看:http://caniuse.com/#search=background-clip

2. transform子元素在overflow: hidden;父元素下依旧会溢出

  • 情景:

    这个问题不再是兼容性问题,正常的浏览器都能看见。
    最近在做一个弹幕,container是用border-radius的,里面的文字元素是通过transform来实现平移。
    但是问题来了:通过transform来平移的文字元素会显示在border-radius以外的地方,设置了overflow: hidden;也不行,背景颜色和其它都是正常的。

  • 代码和效果:

    可以明显看出来,transform的元素的父元素使用了overflow: hidden;依旧还是无效,字体依旧溢出。

  • 解决办法:

    很简单,只要在父元素加一段css即可:

    -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==');
    

    这是一张1px的纯黑色图,具体请看下面的原理。

  • 代码和效果:

  • 原理

    -webkit-mask-image: url('')会在图片中读取透明信息。(透明:没有,黑色:透明,白色:不透明,其它:介于两者之间)

    -webkit-mask-image: url('')作用于当前元素的background。transform作用的是子元素,和父元素没有关系,自然就被遮盖了。

  • mask兼容性

    它不是标准,需要加-webkit-前缀。如果有更多的发现,欢迎补充。
    具体请看:http://caniuse.com/#search=mask

麻凯倩

微信:makaiqian