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

Source: Internet
Author: User

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).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.