Use-webkit-mask-image to resolve a BUG where the Border-radius element Overflow:hidden failed to apply the transform child element (under WebKit).

Today in the online learning time to see an article, it may be used in the future, so the copy came over so that later can be consulted, thanks to Macheng's share, the original address: http://blog.mc-zone.me/article/370

There are border-radius many pits on the CSS3. The various compatibility on Android Mobile side is not said. Recently, a WEBKIT has been encountered in which a child element that has been applied transform is overflow:hidden invalidated.

Problem Recurrence

On an applied border-radius fillet element, add overflow:hidden . The child elements are covered. The portion of the child element that is outside the fillet can be hidden. form the structure of a rounded head container. The code is as follows:

Html

123	<divid="wrapper">    <divid="box"></div></div>

Css

1234567891011121314151617

#wrapper {    position: absolute;    width: 200px;    height: 200px;    overflow: hidden;    border-radius: 50%;    background-color: #ccc;    background-clip: padding-box;}#box {    position :relative;    width: 100%;    height: 100%;    background-color: #cde;    -webkit-transition:all 0.5s ease;    transition:all 0.5s ease;}

At this point you want to #wrapper make a gallery carousel effect in the container. To #box apply a transform change, use a translate3d lateral offset to it. You will find #box #wrapper the range of rounded corners that have overflowed. overfow:hidden;failure.

1234	#box.has-translate {    -webkit-transform:translate3d(100px,0,0);    transform:translate3d(100px,0,0);}

Workaround

Search on StackOverflow. There is indeed a BUG that exists. The solution that is found is that you can use the -weibkit-mask-image overlay off fillet section. -webkit-mask-imageyou can use a picture, Gradient gradient, or SVG mask as the mask mask for an element. Compatibility in WebKit is also possible.

(Image from CSS matte –w3cplus)

Back to the example just now. A pure black 1px png image is used here. After the mask mask is applied, #wrapper the actual content area left behind is not affected by the bug.

123	#wrapper.has-mask-image{    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);}

Complete Example

When you click Toggle Mask-image on the #wrapper app -webkit-mask-image , the trigger transform animation will no longer overflow.

Use-webkit-mask-image to resolve a BUG where the Border-radius element Overflow:hidden failed to apply the transform child element (under WebKit).