3

从昨天开始，我一直在这个工具提示库中工作。我不知道这个问题是因为我的睡眠还是什么，但我不知道发生了什么。

关于这个工具提示库的基本想法很简单：用户在任何 HTML 元素中添加自定义数据属性（我的意思是data-）以及他想要在工具提示中显示的消息，并且它必须出现。可以添加一些选项，例如工具提示的方向以及用户是否想要“剪切”工具提示内的单词。

这是一个例子：

<div data-msg="Hi, I'm a tooltip with a text veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery large" data-orient="right" data-break="yes">Hover me and the tooltip will show!</div>

底部、右侧和左侧方向一切都很好，但是当我添加顶部方向时，浏览器会在工具提示的底部添加一种“边框”。. 我不知道为什么，但我无法修复它。

很奇怪，因为在其他方向不会发生问题。

您可以在下图中看到问题（第一个工具提示有data-orient="top"，第二个工具提示有data-orient="right".

在此处输入图像描述

如果有人知道如何解决此问题，我想向我解释发生了什么。

这是小提琴。

谢谢，狮子座！

编辑：我正在使用 Chrome 28 版本，我的操作系统是 Windows 7。

4

1 回答 1

2

这是一种解决方法，而不是真正的解决方案 - 但在这种情况下不应该有任何严重的副作用（但不能保证，见下文）。除了这似乎是 Chrome 渲染错误之外，我几乎没有什么解释。

将此添加到[data-msg]::before：

-webkit-backface-visibility: hidden;

backface-visibility 倾向于修复相当多的 Chrome 渲染错误，不管它实际上与 3D 变换有关 - 它似乎也修复了这种情况。

它修复问题的原因可能与 Chrome 使用不同的（硬件加速）过渡引擎有关，当您向元素添加与 3D 变换有关的任何内容时。这可能会带来性能损失，这会导致我们找到另一个无意义的规则，如果遇到问题，它至少可以用来提高性能：

-webkit-transform: translate3d(0,0,0);

ETA： -webkit-transform实际上似乎就足以解决问题。试验这两个，看看它们中的任何一个是否会导致其他问题。

有报道称-webkit-backface-visibilityiOS 崩溃了。所以一定要在那里测试它，然后尝试使用translate3d- 或者专门在 iOS 上禁用修复（如果它出现在那里，请忍受错误）。

正如评论中所发布的，这里有一个更简单的问题示例 - 尽管它有时会失败......失败，但它的底部应该主要有不需要的较暗边框：

JSFiddle

该错误似乎是由transitions 与border-radiusand结合引起的opacity。可能 inline-block并且padding在错误中也有作用，但有时它们的删除修复了边界，有时它没有。我希望backface-visibility解决方法更加一致。

于 2013-07-14T22:26:55.697 回答