Javascript 缩放/缩放在Safari中无法正常工作

我正在制作一个可缩放的div，当用户将鼠标悬停在其中一个div上时，该特定div将进行缩放，这目前可以正常工作

我的问题主要是Safari在使用CSS zoom时，div中的所有内容都会跳转，起初它可以很好地扩展，然后内容会跳转到原来的大小，这个问题在Firefox和Chrome中都不会出现

以下是我的主要可缩放分区的css：

主要部门

width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;

主分区悬停

border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform:  scale(1.02,1.02);
transition: 250ms;

我制作了一个JS提琴来显示问题，内容混乱，这通常是PHP生成的，但是当你使用safari将鼠标悬停在包装器上时，你可以看到问题，firefox的悬停缩放效果非常完美，chrome的内容会缩放，但没有过渡。谢谢你的帮助

---

请理解，这不是制作div缩放的问题。。。这是可行的，我的问题是div中的内容，当您将鼠标悬停在div上时，div中的所有内容都会一起缩放，这在firefox中非常有效，请使用safari检查小提琴，而不是缩放。从HTML中删除多余的大括号{/}

#coupon:hover {
    border:1px solid #aaa;
    -webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
    box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
    transition:100ms;
    cursor:pointer;
    -webkit-transform:  scale(1.02,1.02);
    -moz-transform:  scale(1.02,1.02);
    transition: 250ms;
}

---

您只是忘记添加

-webkit transform:scale（1.02,1.02）

，这是用于Safari的web浏览器引擎

---

这就是工作原理。

这不会改变任何东西尝试删除缩放并仅使用transform请删除blockqoute中的说明。只需提及：自Safari 9起，

webkit

-前缀不再是必需的。但由于sole transform在Safari上不起作用，因此使用Prefixts无法解决问题，它以前缩放得非常完美，问题在于包装器div的内部内容，如果你有safari，你会明白我的意思，当你放大divos时，它们会嘎嘎作响你在使用什么？我使用OS 10 safari V 9Im curios来解释你为什么使用zoo&transform只是使用缩放。