隐藏溢出不适用于safari中的绝对元素

Question

＆＃13;

＆＃13;

.services {
    	margin: 0 0 40px 0;
    }
    .services ul {
    	list-style: none;
    }
    .services ul > li {
    	float: left;
    	width: 168px;
    	text-align: center;
    }
    .services ul > li + li {
    	margin-left: 24px;
    }
    .services ul > li .thumb {
    	border: 2px solid #b9b9b9;
    	border-radius: 50%;
    	-moz-border-radius: 50%
    	-webkit-border-radius: 50%;
    	overflow: hidden;
    	position: relative;
    	margin: 0 0 14px 0;
    }
    .services ul > li .thumb img {
    	display: block;
    	border-radius: 50%;
    	-moz-border-radius: 50%;
    	-webkit-border-radius: 50%;
    	max-width: 100%;
    	height: auto;
    }
    .services ul > li .thumb span {
    	position: absolute;
    	background: #95bd0d;
    	font-size: 14px;
    	line-height: 20px;
    	width: 100%;
    	padding: 8px 10px;
    	bottom: 0px;
    	left: 0px;
    	color: #fff;
    }

＆＃13;

<div class="services">
    <div class="container">
        <ul>
            <li>
                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-3.jpg" height="168" width="168" alt="" > <span>FAKTEN</span> </div>
                <h4>Spirovent Superior - Vakuumentgaser</h4>
                <a href="#">lesen Sie mehr</a>
            </li>
            <li>
                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-4.jpg" height="168" width="168" alt="" > </div>
                <h4>Spirovent Superior - Vakuumentgaser</h4>
                <a href="#">lesen Sie mehr</a>
            </li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Thumb div溢出：隐藏不适用于safari中的绝对元素。 除了它也不能使用拇指图像，我还使用border-radius对图像标记进行了舍入。

Word FAKTEN 应隐藏为左图。下面是代码。请建议。

Answer 1

这是一份记录在案的bug

最佳解决方法是在.thumb规则中添加以下内容

-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

＆＃13;

＆＃13;

.services {
    	margin: 0 0 40px 0;
    }
    .services ul {
    	list-style: none;
    }
    .services ul > li {
    	float: left;
    	width: 168px;
    	text-align: center;
    }
    .services ul > li + li {
    	margin-left: 24px;
    }
    .services ul > li .thumb {
    	border: 2px solid #b9b9b9;
    	border-radius: 50%;
    	-moz-border-radius: 50%
    	-webkit-border-radius: 50%;
    	overflow: hidden;
    	position: relative;
    	margin: 0 0 14px 0;
      /*fix safari border-radius and overflow hidden problem*/
      -webkit-transform: translateZ(0);
      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    }
    .services ul > li .thumb img {
    	display: block;
    	border-radius: 50%;
    	-moz-border-radius: 50%;
    	-webkit-border-radius: 50%;
    	max-width: 100%;
    	height: auto;
    }
    .services ul > li .thumb span {
    	position: absolute;
    	background: #95bd0d;
    	font-size: 14px;
    	line-height: 20px;
    	width: 100%;
    	padding: 8px 10px;
    	bottom: 0px;
    	left: 0px;
    	color: #fff;
    }

＆＃13;

<div class="services">
    <div class="container">
        <ul>
            <li>
                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-3.jpg" height="168" width="168" alt="" > <span>FAKTEN</span> </div>
                <h4>Spirovent Superior - Vakuumentgaser</h4>
                <a href="#">lesen Sie mehr</a>
            </li>
            <li>
                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-4.jpg" height="168" width="168" alt="" > </div>
                <h4>Spirovent Superior - Vakuumentgaser</h4>
                <a href="#">lesen Sie mehr</a>
            </li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实际上，在错误单中建议将以下内容添加到具有溢出的元素中：隐藏；

position:relative; 
z-index:0;

Answer 3

它在工作，不是100％，但是很好

-webkit-transform：translateZ（0）; -webkit-mask-image：-webkit-radial-gradient（圆圈，白色100％，黑色100％）；