Question

我正在制作一个可缩放的div，当用户在其中一个div上盘旋然后特定的div缩放时，这当前有效......

我的问题主要是使用Safari时使用CSS缩放，div中的所有内容都会跳转，首先它会很好地缩放，然后内容会跳到原来的大小，这个问题在Firefox和Chrome中都不会发生。

这是我主要的zoomable div的css：

MAIN DIV

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;

MAIN DIV 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;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform:  scale(1.02,1.02);
transition: 250ms;

我已经做了一个JS小提示来显示问题，内容搞砸了，这通常是PHP生成的，你可以看到问题虽然当你使用safari将鼠标悬停在包装上时，使用firefox悬停缩放效果是完美的并且使用chrome，内容会缩放，但是没有过渡。谢谢你的帮助

https://jsfiddle.net/04t5psbu/

请理解，这不是制作div缩放的问题......这有效，我的问题在于div中的内容，当你将鼠标悬停在div上时，div中的所有内容一起缩放，这完美适用于火狐，请使用safari检查小提琴

Answer 1

使用_repr_html代替缩放。从HTML中删除无关的花括号{/}。

transform

Answer 2

您只是忘记添加-webkit-transform: scale(1.02,1.02);，这是用于Safari的网络浏览器引擎。

这是工作fiddle。

缩放/缩放在Safari

2 个答案: