Safari 中 3D 转换元素顶部的清晰文本
我需要将一些文本浮动在已使用 -webkit-transform:translate3d() 转换的某些元素之上。我发现的问题是，我能够将元素堆叠在已进行 3D 转换的任何内容之上的唯一方法是使用 translate3d() 并将其放置在上面在 z 轴上。对于图像和形状来说这还好，但对于文本来说就很糟糕了，文本的模糊程度令人无法接受。
是否有某种方法可以将非 3D 转换文本浮动在 3D 转换元素之上或保持文本的清晰度？
I need to float some text on top of some elements that have been transformed using -webkit-transform:translate3d(). The problem I've found is that the only way I've been able to stack an element on top of anything that has been 3d-transformed, is to use translate3d() as well and place it above on the z-axis. That's okay for images and shapes, but it's terrible for text, which comes out unacceptably blurry.
Is there some way to either float non-3d-transformed text on top of a 3d-transformed element or to preserve the crispness of the text?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不需要仅使用 3D 变换来使文本浮动，只需在背景和文本上设置 z 索引即可。也就是说，与 3D 动画结合时，文本渲染可能非常难以预测（移动 safari 的渲染效果往往比桌面 safari 好得多，因此，如果您正在预览移动设备上的某些内容，请务必在实际的 iPhone 上查看。）
也就是说，您可以尝试采取一些措施来让文本在桌面 Safari 中看起来不全是 IE6。
1）将字体粗细设置为浅，然后添加一个比文本更浅的像素的 -webkit-text-lines
2) 添加零偏移和 1 或 2 像素模糊的浅色调文本阴影
3) 将字体尺寸设置得非常大，然后使用 3D 变换将其缩放到您需要的尺寸。
4）使用字体平滑
You shouldn't need to use a 3d transform just to get text to float, just set z-indexes on both the background and the text. That said, text rendering can be very unpredictable when combined with 3D animation (and mobile safari tends to be far better at rendering than desktop safari, so if you're previewing something for mobile - really do look at it on your actual iphone.)
That said, there are a few things you can try to get text not to look all IE6 in desktop safari.
1) Set the font-weight to light but then add a one pixel -webkit-text-stroke in a lighter tone than your text
2) Add a text-shadow in a lighter tone with a zero offsets and a 1 or 2 pixel blur
3) Make the font size be very large and scale it using 3D transforms to the size you need.
4) Use font-smoothing
如果您将零或负值应用于translate3d(x, y, z)中的z，那么您可以将东西放置在转换后的元素上方，即：
这是一个适用于Safari的测试用例：
http://jsfiddle.net/eqFNY/
If you apply a zero or negative value to z in translate3d(x, y, z) then you can position things above the transformed elements, i.e:
Here is a test case that works on Safari:
http://jsfiddle.net/eqFNY/