Html CSS位置：相对和-webkit转换创建文本权重小故障

当一个CSS动画被触发，并且一个对象被CSS定位为除

静态

（

相对

，

绝对

，等等）之外的任何对象时，在动画期间，对象内的文本突然变薄。之后，它会恢复为全宽

尝试在Safari中运行此页面：（更新以澄清）

请注意，当

#content

div没有绝对或相对定位时，问题就消失了。这是针对iPad web应用程序的，在设备上比在桌面上更明显

你知道是什么造成了这种干扰吗

---

编辑澄清：

webkit transform

和

webkit transition

必须使用，因为它们是硬件加速的，这会产生更平滑的动画。

我能够重现您的问题，这就解决了问题。您不需要进行

转换

，只需要进行

转换

<代码>转换本身就是硬件加速的

发件人：

CSS转换使得样式动画对每个人来说都很简单，但是 还有一个智能性能特性。因为CSS转换是 由浏览器管理，其动画的逼真度可以大大提高 改进，并且在许多情况下硬件加速

演示：

脚本：

函数doMove（）{
document.getElementById（'mover'）.style.left='150px'；
setTimeout（函数（）{
document.getElementById（'mover'）.style.left='50px'；
}, 1000 );
}
setInterval（函数（）{doMove（）；}，3000）；

CSS:

#内容{
字体大小：150%；
位置：相对位置；
}
#搬运工{
字体大小：200%；
左：50px；
位置：绝对位置；
顶部：250px；
过渡：左1.1s输入输出；
}

HTML:

厨房里有一个大蛋糕，上面点着十七支蜡烛
桌子中央。上面写着“16岁生日快乐”和
“祝你好运，韦斯利。”整个驾驶台的工作人员都在等待
韦斯利和贝弗利走进来，围着桌子转。他是
感动，尴尬，想离开那里。
某物

我认为这可能只是渲染动画的速度。我这边的Chrome和Safari看起来不错。我觉得Chrome 17.0.963.12和Safari 5.1.1在OS X上也不错。你能用浏览器和OS版本更新你的问题吗？您可能需要考虑将一些示例代码直接放入您的问题中。你会让更多的人看的。而且，我从你的问题中学到了一些新的东西。我不知道你可以在

静态
元素上使用
transform
。请务必查看lorum ipsum文本，而不是移动对象。是正文弄乱了。好吧，我复制了它，我的解决方案仍然修复了它。我更新了演示链接<代码>转换
由硬件自身加速。试试看。小的挑剔，-不固定的css属性应该跟在前缀后面。