jScrollPane 在 Safari 中的视频上导致文本失真

Posted 2023-02-16

【中文标题】jScrollPane 在 Safari 中的视频上导致文本失真

【英文标题】：jScrollPane Over Video in Safari Resulting in Distorted Text

【发布时间】：2011-08-06 14:57:03

【问题描述】：

我的网站： http://shuttersonthebeach.com

---

我的浏览器/操作系统： Safari 5.0.4 +/Mac

---

问题：点击页面标头中的“日历”或“特价商品”。覆盖应该显示。在该叠加层内有带有自定义滚动条的文本列 (jScrollPane)。在 Safari 中，只有在具有 flash 标题的页面上，自定义滚动区域内的文本才会被扭曲。在任何其他浏览器（包括 Chrome）中都不是这种情况。

我最有根据的猜测是它与 flash 对象的 wmode 参数有关。我尝试将 wmode 从“透明”更改为“不透明”，但问题仍然存在。我还考虑了 z-index 相关问题的可能性……据我所知，这也不是问题。

我已经在网上到处搜索了其他遇到类似情况但我没有成功的人。非常感谢您提供的任何帮助。

谢谢！

更新：我确定删除 jScrollPane 并添加自动溢出可修复文本失真问题 [请参阅附图]。当然，这不是一个解决方案，因为我不想使用默认的浏览器滚动条，但它可能对调试有用。

另一个更新：此问题与闪存无关。 html5 视频以及 Safari 中也会出现扭曲/模糊的文本。

【问题讨论】：

这很奇怪！我可以在这里在我的 Safari 上重现（但不能在也是 webkit 浏览器的 Chrome 上）。这是我第一次听说这样的事情......如果你把 jScrollPane 排除在等式之外并且只使用浏览器的默认溢出：自动滚动条，那么文本仍然有效吗？

这是一个很好的建议@vitch。谢谢你。我删除了 jScrollPane 并使列溢出：auto 和文本扭曲尿布！这表明 jScrollPane、Flash 和 Safari 有点奇怪哈哈。

好奇者和好奇者！我想进一步缩小范围，您可以尝试查看 Flash 内容顶部的“位置：绝对”元素是否也在 Safari 中弄乱了字体...

绝对定位在 Flash 对象上方的元素没有扭曲的文本。似乎只发生在 jScrollPane 所针对的元素上。

【参考方案1】：

我前段时间在 Opera 上遇到过同样的问题，非常烦人…… jScrollPane 使用了overflow:hidden，浏览器插件不太喜欢这样。

但是由于您的问题出在 Webkit 上，you could do it with CSS 用于 Safari/Chrome？

【讨论】：

感谢您的建议@bpierre。没有意识到 webkit 允许使用 css 进行滚动条样式。我显然更愿意不必做一个一次性的 webkit 滚动条并将 jscrollpane 用于其他所有内容，但它可能归结为哈哈。谢谢！

【参考方案2】：

我在搜索不同的东西时遇到了以下文章，我认为它可能有用：

http://johan***.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

它提到了硬件加速和位置：相对是消除抗锯齿的罪魁祸首。你不能对 position: relative 做任何事情（因为 jScrollPane 在内部需要它）但也许改变 flash 的 WMODE 会有所帮助？

【讨论】：

感谢您的建议。尝试更改 wmode 没有成功：/