在Android上，具有邊界半徑的絕對父項不會隱藏相對子圖像的邊角

我有一個div定位爲相對圖像，並位於絕對定位的圖像中，並且在懸停時具有縮放效果。父div有一個邊框半徑，可以在Chrome，Firefox但在Android上剪切圖像（子）的左角，但是無法正常工作。在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>

來源

2015-09-17 Adyyda

您可以在Android本地瀏覽器中使用演示http://jsfiddle.net/Adyyda/7mcxcdv8/7/ – Adyyda

你嘗試在Android哪種瀏覽器？這可能是瀏覽器問題。

來源

2015-09-17 09:03:28 divinemaniac

默認瀏覽器。不是鉻或火狐或歌劇。 – Adyyda

所以在android上的其他瀏覽器工作？這意味着它是一個瀏覽器問題，因爲您正在使用** CSS3 **屬性，如'transform'和'backface-visibility'。 – divinemaniac

問題來自父母親親屬和孩子的絕對。如果我將它們放置爲靜態，問題將消失，但我會打破我的佈局/功能。至於轉換不支持 - http://caniuse.com/#search=transform - 所以它不是真的 – Adyyda

在Android上，具有邊界半徑的絕對父項不會隱藏相對子圖像的邊角

回答

相關問題