Safari 更改 bxSlider 上的字体粗细答案

【问题标题】：Safari changing font weight on bxSliderSafari 更改 bxSlider 上的字体粗细
【发布时间】：2016-06-05 23:40:06
【问题描述】：

这似乎只与 Safari 相关，但是当我激活 bxSlider 时，字体粗细会发生变化……在 Chrome 和 Firefox 中一切看起来都很棒。有什么东西可以添加到我的 CSS 中来解决这个问题吗？左边的图像是 Safari 问题...右边的图像是它的外观...我已经尝试过 OSX-Only Fix、-Webkit-Text-Shadow Hack 和 -Webkit-Text -提到中风黑客：https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/。我认为这与 bxSlider 无关，因为文本在其他浏览器中看起来不错。

我的页面位于：http://joshrodg.com/hallmark/（蓝色部分位于底部）- 其他人看到了吗？

谢谢，
乔什

【问题讨论】：

我一直在研究这个，bxSlider 将transform: translate3d(0px, 0px, 0px); 添加到包含<ul> 的<li> 我正在滑动，但如果我将其更改为“无”，然后滑块坏了。
现在我的解决方案是将其添加到我的 css 中：-webkit-text-stroke: 0.30px;，但是当我这样做时，文本看起来有点模糊，这就是为什么我在上面提到它不起作用...如果有人知道其他解决方案，请告诉我。

标签： javascript css fonts safari bxslider

【解决方案1】：

因此，对于这个问题，我找不到解决方案（除了保持原样）。

我看到一个解决方案提到浏览器与动画混淆，因此文本呈现不正确。要解决此问题，您可以添加相对位置和 z-index。 z-index 应该高于动画类的 z-index。看了之后，我无法弄清楚哪个班级正在执行动画。我尝试添加 z-index，但文本并没有恢复正常。

我最终所做的正是我在上一篇文章中提到的......在.bx-viewport 上我添加了-webkit-text-stroke: 0.30px;。我喜欢这个解决方案，因为 webkit 前缀主要影响 Safari 浏览器（我发现问题的地方）。

因为我还没有遇到任何其他可行的方法，所以我将使用它作为我的解决方案。

【讨论】：