【发布时间】：2012-12-03 18:33:33
【问题描述】：
我有一个很小的设置，两个 html 文件和一个 javascript 安装 (http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/)。
这两个 html 文件中有 100% 的高度和宽度 div 和一个链接（每个链接指向另一个 html 文件以启动转换）。
该脚本在初始化开始时似乎创建了两个 div，d1 和 d2，d1 设置为当前正文内容，d2 设置为目标 html 文件内容。然后 CSS 转换两个 div 以产生幻灯片效果，最后 javascript 获取 d2 内容并将其设置为 body 内容，然后再删除两个新 div。
问题是当css过渡开始时，字体略有变化（字符变大了一点，当我说一点时，我的意思是一点点但很明显）。过渡完成后，字体恢复正常。这会在字体上产生一种“跳跃”的感觉，当开始转换时，您会得到这种字体跳跃，然后它会跳回原来的大小。
它在安卓上发生的次数比在 iOS 上要多得多。
我正在使用 Phonegap 运行该应用程序，所以我相信网络浏览器是 webkit，Cordova。
感谢您的帮助！！！我真的希望有人可以帮助解决这个问题。
我曾尝试在链接上设置过渡效果以阻止字体更改，例如 3d 设置等，我的研究表明，很多人都表示将这些项目放入硬件层，以免它们变得模糊。
谢谢！
【问题讨论】：
-
它似乎也使一些文本加粗，然后在转换后它似乎恢复正常
-
我在 OSX 上看到过这种情况，但那是因为 OSX 用亚像素抗锯齿渲染文本非常粗体。任何过渡效果都会暂时禁用亚像素文本渲染，因此在效果完成后文本会“弹出”回粗体。通常解决方案是应用 -webkit-font-smoothing: antialiased。但是，iOS 不支持亚像素字体平滑，我有点怀疑 Android 也不支持。
-
嗨，克里斯，谢谢。知道我会将 webkit 样式应用于哪个元素吗？例如，我可以将它应用于 d1 和 d2 * 吗？
-
如果你愿意，你可以将它应用到身体上。我真的不认为它会有所帮助，但值得一试。
-
phonegap 中的过渡非常有问题，更不用说第三方插件了
标签： javascript css cordova webkit transitions