gpt4 book ai didi

css - 使用 css-transition 时 Chrome 字母会跳舞

转载 作者:太空宇宙 更新时间:2023-11-04 13:34:52 26 4
gpt4 key购买 nike

当我在 iframe 中使用 css3-transition 属性时,文本正在变形!知道如何解决它吗?

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
h1 {
margin: 0;
font-size: 140px;
}

input {
font-size: 24px;
width: 400px;
-webkit-transition: 0.15s linear opacity;
/* -webkit-transform: translate3d(0,0,0); */
}

input:focus {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>&lt;iframe&gt;</h1>
<input type="text" name="input" placeholder="focus/blur this input" />
<ul>
<li>this happens only in &lt;iframe&gt and <font color="red">Google Chrome</font>;</li>
<li>if we use <i>-webkit-transform: translate3d(0,0,0)</i> property - the problem is solved, but text does not render correctly - letters become pixelized, so <a href="https://coderwall.com/p/z7egjg">this solution</a> is not what I'm looking for;</li>
<li>tested on Chrome 34.0.1847.116 m / Canary 36.0.1942.0.</li>
</ul>
</body>
</html>

在这里 fiddle :http://jsfiddle.net/ArtemFitiskin/2VLvV/9/

最佳答案

添加 -webkit-backface-visibility: hidden; 将解决这个问题。我以前遇到过这个。

CSS:

input {
font-size: 24px;
width: 400px;
-webkit-transition: 0.15s linear opacity;
/* -webkit-transform: translate3d(0,0,0); */
-webkit-backface-visibility: hidden;
}

DEMO HERE

关于css - 使用 css-transition 时 Chrome 字母会跳舞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23108743/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com