CSS 位置：相对和 -webkit-transform 会造成文本粗细问题

发布于 2024-12-23 15:05:10 字数 511 浏览 1 评论 0原文

当触发 CSS 动画并且使用 CSS 将对象定位为除 static（relative、absolute 等）以外的任何内容时，其中的文本在动画期间，对象突然变得非常薄。然后它会恢复到全宽度。

尝试在 Safari 中运行此页面： http://pastehtml.com/view/bjgaloxjj.html (已更新以供澄清）

请注意，当 #content div 未绝对或相对定位时，问题就会消失。这是针对 iPad Web 应用程序的，在设备上比在桌面上更明显。

关于造成这种干扰的原因有什么想法吗？

编辑澄清：必须使用 webkit-transform 和 webkit-transition 因为它们是硬件加速的，这会导致更流畅的动画。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

大姐，你呐 2024-12-30 15:05:10

我能够重现您的问题并解决它。您不需要转换来实现您正在寻找的结果，只需要转换。 transition 本身是硬件加速的。

来自 http://www.html5rocks.com/en/tutorials /speed/html5/#toc-hardware-accell：

CSS 过渡使样式动画对每个人来说都变得微不足道，但它们
也是一项智能性能功能。因为 CSS 过渡是
由浏览器管理，其动画的保真度可以大大提高
改进，并且在许多情况下硬件加速。

演示： http://jsfiddle.net/ThinkingStiff/bqSJX/

脚本：

function doMove() {
    document.getElementById('mover').style.left = '150px';

    window.setTimeout( function() {
        document.getElementById('mover').style.left = '50px';
    }, 1000 );

}

window.setInterval( function() { doMove(); }, 3000 );

CSS：

#content {
    font-size: 150%;
    position: relative;   
}

#mover {
    font-size: 200%;
    left: 50px;
    position: absolute;
    top: 250px;
    transition: left 1.1s ease-in-out;
}

HTML：

<div id="content">A large cake with seventeen BURNING candles is in the
    center of the table. It says "HAPPY 16TH BIRTHDAY" and
    "GOOD LUCK, WESLEY." The whole BRIDGE CREW waits
    around the table as Wesley ENTERS with Beverly. He's
    touched, embarrassed and -- wants to get out of there.</div>
<div id="mover">SOMETHING</div>

I was able to reproduce your problem and this fixes it. You don't need a transform to achieve the result you're looking for, only a transition. transition by itself is hardware accelerated.

From http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell:

CSS Transitions make style animation trivial for everyone, but they
also are a smart performance feature. Because a CSS transition is
managed by the browser, the fidelity of its animation can be greatly
improved, and in many cases hardware accelerated.

Demo: http://jsfiddle.net/ThinkingStiff/bqSJX/

Script:

function doMove() {
    document.getElementById('mover').style.left = '150px';

    window.setTimeout( function() {
        document.getElementById('mover').style.left = '50px';
    }, 1000 );

}

window.setInterval( function() { doMove(); }, 3000 );

CSS:

#content {
    font-size: 150%;
    position: relative;   
}

#mover {
    font-size: 200%;
    left: 50px;
    position: absolute;
    top: 250px;
    transition: left 1.1s ease-in-out;
}

HTML:

<div id="content">A large cake with seventeen BURNING candles is in the
    center of the table. It says "HAPPY 16TH BIRTHDAY" and
    "GOOD LUCK, WESLEY." The whole BRIDGE CREW waits
    around the table as Wesley ENTERS with Beverly. He's
    touched, embarrassed and -- wants to get out of there.</div>
<div id="mover">SOMETHING</div>

回复收藏 0 原文

~没有更多了~