那些遇到过的问题

小编seb*_*ebi的帖子

Transform scale() 用于带边框的元素时的 Safari 错误

当CSS转换scale()函数用于有边框的元素时，它在Safari上似乎有一个错误。

我正在尝试使用 Transform:scale() 函数在鼠标上缩放图像，但如果图像有边框，则缩放时会出现像素化。以下是应用了相同 CSS 规则（边框除外）的同一元素的示例： 在此输入图像描述

代码示例： https: //jsfiddle.net/m6g4kw30/

div {
  text-align: center;
}

img {
  height: 100px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  border: 1px solid #000;
  margin: 20px;
}

img.noborder {
  border: none;
}

img:hover {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(5);
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  -o-transform: translateZ(0) scale(5);
  transform: translateZ(0) scale(5);
}
Run Code Online (Sandbox Code Playgroud) 
<div>
  <img src="https://via.placeholder.com/1000.png" alt="">
  <img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>
Run Code Online (Sandbox Code Playgroud)

html css safari

seb*_*ebi
2019 04-30
2
推荐指数
1
解决办法
5849
查看次数

标签 统计

css ×1

html ×1

safari ×1