在 Android 上，具有边框半径的绝对父级不会隐藏相对子图像的角答案

【问题标题】：On Android, absolute parent with border-radius does not hide corner of relative child image在 Android 上，具有边框半径的绝对父级不会隐藏相对子图像的角
【发布时间】：2015-09-17 17:03:28
【问题描述】：

我有一个定位为相对的 div 和一个定位为绝对的图像，在悬停时具有缩放效果。父 div 有一个边框半径，可以在 Chrome、Firefox 中很好地切割图像（子）的左角，但在 Android 上不起作用。

html 和 css 必须保持不变，并以某种方式使其在 Android 手机上正确显示 - 在 Iphone 上我没有尝试，因为我没有。我在这个网站上找到的任何解决方案都不适用于我的情况，所以我希望任何人都能找到有效的解决方案。谢谢

结构是

body {
    background-color:grey;
}
.inner-container {
    width:100%;
    height:160px;
    float:left;
    background-color:red;
    margin-bottom:10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
    position:relative;
    z-index:30;
}
.listing-thumb {
    display: inline-block;
    float: left;
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 214px;
    z-index: 1;
}
.listing-thumb img {
    -webkit-backface-visibility: hidden;
    border: 0 none;
    bottom: 0;
    float: none;
    left: -50%;
    margin: auto;
    max-width: 100%;
    position: absolute;
    right: -50%;
    top: 0;
    max-height: 100%;
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.listing-thumb img:hover {
    -webkit-backface-visibility: hidden;
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
    <div class="inner-container">
        <div class="listing-photo"> <a class="listing-thumb" title="" href="">
            <img alt="" title="" src="http://www.mercedes-benz.ro/content/media_library/hq/hq_mpc_reference_site/passenger_cars_ng/new_cars/models/e-class/_w212/pad_11-2012/core_navigation/mercedes-benz-e-class-w212_model_navigation_960x298_11-2012_jpg.object-Single-MEDIA.tmp/mercedes-benz-e-class-w212_model_navigation_960x298_11-2012.jpg">
        </a>

        </div>
    </div>
    <div class="inner-container">
        <div class="listing-photo"> <a class="listing-thumb" title="" href="">
            <img alt="" title="" src="http://s1.cdn.autoevolution.com/images/news/2014-mercedes-cla-45-amg-first-photos-leaked-photo-gallery-56630_1.jpg">
        </a>

        </div>
    </div>
    <div class="inner-container">
        <div class="listing-photo"> <a class="listing-thumb" title="" href="">
            <img alt="" title="" src="https://pbs.twimg.com/profile_images/1881059795/Star_Carbon_Background_400x400.gif">
        </a>

        </div>
    </div>
</body>

【问题讨论】：

可以在Android原生浏览器中作为demo使用jsfiddle.net/Adyyda/7mcxcdv8/7

标签： android jquery css image

【解决方案1】：

您在 Android 上试用过哪种浏览器？可能是浏览器问题。

【讨论】：

默认浏览器。不是chrome、firefox或opera。
那么安卓上的其他浏览器可以用吗？这意味着它是一个浏览器问题，因为您使用的是 CSS3 属性，例如 transform 和 backface-visibility。
问题来自于父 div 是相对的，子 div 是绝对的。如果我将它们放置为静态，问题就会消失，但我会破坏我的布局/功能。至于不支持转换 - caniuse.com/#search=transform - 所以这是不正确的