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

Question

.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;
    }

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

Thumb div overflow:hidden 无法在 Safari 中使用绝对元素。除了它也不适用于拇指图像外，我还用 border-radius 将图像标签四舍五入。

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

Answer 1

这是一个有据可查的 bug

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

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

.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;
    }

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

Answer 2

实际上，bug ticket 中建议将以下内容添加到溢出的元素中：hidden;

position:relative; 
z-index:0;

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

Overflow hidden is not working with absolute element in safari

html

css

safari

overflow