Html 在Safari中同时转换宽度和高度

有没有办法在Safari中同时设置

变换的动画：平移

、

高度

和

宽度

？我有一只虫子。转换完成后，元素将跳转几像素。这是

div{
背景颜色：绿色；
高度：100px；
左：200px；
位置：绝对位置；
顶部：200px；
变换：变换1s，高度1s，宽度1s；
宽度：100px；
}
div:悬停{
高度：150像素；
宽度：150px；
转换：翻译（-50%，-50%）；
}

---

试试这个。我改变了过渡的定义

div{
背景颜色：绿色；
高度：100px；
左：200px；
位置：绝对位置；
顶部：200px；
过渡：所有1；
宽度：100px；
}
div:悬停{
高度：150像素；
宽度：150px；
转换：翻译（-50%，-50%）；
}

---

发生跳转是因为高度和宽度值基于像素，而变换是百分比，这会产生子像素。尝试通过设置

scale

动画来改变方法（最好将动画限制在变换和不透明度范围内。请参阅以获取参考）。使用

变换原点

定义变换原点

div{
背景颜色：绿色；
高度：100px；
左：200px；
位置：绝对位置；
顶部：200px；
转变：转变1s；
宽度：100px；
变换原点：右下角；
}
div:悬停{
转换：比例（1.5）；
}

它正在Safari上工作
您需要将

-webkit-

与

转换

和

转换

div{
背景颜色：绿色；
高度：100px；
左：200px；
位置：绝对位置；
顶部：200px；
-webkit转换：所有1；
宽度：100px；
}
div:悬停{
高度：150像素；
宽度：150px；
高度：150像素；
宽度：150px；
-webkit转换：翻译（-50%，-50%）；
}

---

我认为问题是由于

元素在
主体上的绝对位置造成的。转换完成后，浏览器将重新计算父元素的
绝对
位置，并且
转换
将成为阻碍。解决方案可能比你想象的要简单

创建一个外部容器，该容器“保护”内部容器在左/上方向生长的位置。我认为下面的例子将解释其余的（也在safari中测试！）


正文{
/*只是为了好看*/
保证金：2rem；
}
/*集装箱外区*/
.外部{
边框：1px实心#222；
宽度：150px；
高度：150像素；
位置：相对位置；
}
/*内部元素与右侧对齐*/
.内部{
背景颜色：绿色；
宽度：100px；
高度：100px；
过渡：全部5秒；
位置：绝对位置；
右：0；
底部：0；
}
/*没有翻译，没有问题*/
.内部：悬停{
宽度：150px；
高度：150像素；
}

这并不能解决safari上的问题：/并不能真正回答您的问题，但您是否尝试过使用
scale
？