javascript - 悬停/点击/jquery 事件的字体渲染问题

Question

使用 bootstrap 3 构建一个移动站点，它利用了 collapse js 插件。

我的问题是，当您将鼠标悬停在折叠中的字体上时(值得注意的是，系统字体会发生这种情况，而不仅仅是网络字体问题，使用网络字体更容易显示)或单击它的字体外观变化。部分字体被删除或大小发生变化。我不确定为什么会这样，我尝试了以下操作:

• -webkit-字体平滑
• 文本渲染
• 添加固定行高
• 背面可见性

但是，这些都不起作用。我的想法已经用完了，虽然很难在屏幕截图中显示，但在与网站交互时，这 100% 是一个大而明显的问题。

我假设它与崩溃的 jquery 有关，但我无法在 bootstrap 存储库中找到任何东西，在这里或从一般的谷歌搜索(很难搜索哈哈)所以任何帮助将不胜感激。我没有太多与字体相关的代码，但是:

  .panel-tap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 1;
    font-size: 16px;
  }

面板有一些填充，但这在动画期间不会改变，也不会在动画期间添加任何样式(仅添加类名称以显示/隐藏下面的内容。

我无法发布指向该站点的链接，但希望这些信息足够了。谢谢

编辑:值得注意的是，我已经尝试删除与其关联的所有样式(即位置)并尝试添加特定样式以确保它不会在整个网站上被覆盖(即添加字体-粗细、行高、边框等)

edit2:这种情况不会一直发生，几秒或几次点击后就停止了，完全不一致

edit3:禁用了折叠的动画/jquery 方面，它仍然这样做

Answer 1

一些想法:

• 您是否尝试过将所有 CSS 动画属性设置为 0/none。它可能正在从其他地方的父/错误选择器中挑选一些东西。

• 仔细检查 :active 或 :focus 没有 CSS。或者可能是文本周围具有相对字体大小(em、% 等)

• 我记得我遇到过类似的问题，position:relative;。你能在文本周围包裹一个 span 并给它 position:static;

• 是否存在可能导致问题的事件类或其他内容？

我能想到的就这些了。但可能会有所帮助。