javascript - Safari 在 bxSlider 上改变字体粗细

标签 javascript css fonts safari bxslider

这似乎只与 Safari 有关,但当我激活 bxSlider 时,字体粗细会发生变化……在 Chrome 和 Firefox 中一切看起来都很棒。有什么我可以添加到我的 css 来解决这个问题的吗?左边的图像是 Safari 问题...右边的图像是它应该看起来的样子...我已经尝试了 OSX-Only Fix、-Webkit-Text-Shadow Hack 和 -Webkit-Text -Stroke Hack 提到:https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/ .我不认为这与 bxSlider 特别相关,因为文本在其他浏览器中看起来很好。

enter image description here

我的页面位于:http://joshrodg.com/hallmark/ (蓝色部分朝向底部)-还有其他人看到了吗?

谢谢,
乔希

最佳答案

因此,对于这个问题,我找不到解决方案(除了保持原样)。

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

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

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

关于javascript - Safari 在 bxSlider 上改变字体粗细,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35589333/

相关文章:

internet-explorer - Font Awesome无法在Firefox和IE中使用

jquery - 为什么我的对象在使用 css 淡出后又再次显示?

javascript - Highcharts 日期解析问题

javascript - 阻止 Firefox 重新加载确认

javascript - JQuery.Validate 插件可以阻止提交 Ajax 表单吗

html - 垂直对齐的图像和文本 div

php - 从左到右插入记录到3列

css - 本地字体因 Chrome 和 FireFox 更新而中断

wordpress - wordpress(前端)中的 Dashicons 不会显示

javascript - 使用 d3 和多个对 Angular 画笔创建雷达图