Question

这既是一个问题，也是一个答案。我今天遇到了一个错误，我多年来从未见过作为网络开发人员，所以我想与将来可能会遇到这个问题的人分享修复。我也很好奇是否有其他人经历过它，以及是否有已知原因。

问题是Mac上Safari 5.1独有的。单击选择下拉菜单后，页面将完全刷新。经过几分钟的调试，我得出结论，这个错误是由......等待...在选择框上放置一个css边框。（border：1px solid #ccc;）

WTF？

显然，Safari的渲染引擎不喜欢这种风格，它只是整个页面的核心。它只有Safari 5.1（5.0.3很好）而且只能在Mac上使用。

在我公司的多个应用程序中，它可以100％重现。但它不是普遍可重复的100％，这意味着我不能只是去任何随机网站并触发它。它必须是css规则或html标记的某种组合才能触发它。

有没有人见过这个？有什么具体条件可能导致它的任何见解？如果没有，哦，好吧。我将其归结为一个浏览器错误，并将此帖留给其他开发人员，以便在他们遇到同样的问题时找到它。

Answer 1

最终答案：

我找到了我们在网站上特别遇到的问题的最终解决方案。加载网站后，我们让TypeKit库将字体附加到页面。当我专门将选择框上的font-family属性设置为TypeKit字体以外的其他属性时，刷新行为不再出现。

我不确定你是否使用TypeKit，但这是一个首先看的好地方。

原始答案：

我今天在我公司运营的其中一个网站上遇到了这个问题。我已经将它缩小到一组很可能导致它的CSS规则（注释掉那些不会在页面重新加载时产生错误）。

我看到的主要问题很可能是浏览器本身的安全问题。如果您在任何选项卡中有任何打开的会话，它也会清除其会话数据。

找到包含此错误的网页，并打开其他几个用于登录Google帐户或其他帐户的标签页。单击带有错误的站点上的选择框时，页面将刷新，其他选项卡中的会话也会重置。

<强>更新我缩小了影响我们页面的CSS规则集。这些CSS规则中的任何一个都会导致此行为：

-webkit-外观
边界
边界风格
边界半径
-webkit-边界半径
背景重复
背景位置
背景图像

我原本以为是-background-image属性导致了问题，因为我们使用data image而不是实际的png或jpg（给出类似于默认值的样式） Firefox），但我显然错了。

更新2：我尝试使用CSS重置使用webkit-specific CSS hack将事情恢复正常，但只是触及任何这些CSS规则似乎会导致事情变得混乱。我想我们需要删除规则，直到有解决方法。

更新3：这似乎与页面上加载的Javascript有关。如果我在Safari中禁用Javascript，则不会发生这种情况。

Answer 2

您应该提交错误报告：https://bugs.webkit.org/

这样一来，这个bug就会（希望！）得到修复，以便未来的开发人员永远不会碰到它。

此问题已在不久前修复：https://bugs.webkit.org/show_bug.cgi?id=65350

Answer 3

我也有这个问题。我通过删除所有选择

的＆＃39; font-face＆＃39; 指令解决了这个问题

Answer 4

我也遇到了网页重新加载/会话清除错误。

所以这就是我从你的答案中找到的一些指示......

在我使用GoogleFonts的页面上，像这样应用CSS：

body, p, ol, ul, td, input, textarea, select, option {
  font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
  font-size:   12px;
  line-height: 17px;
}

当您将网络字体应用于选择标签或选项标签时，Safari似乎很讨厌。将代码更改为此问题会使问题消失。

body {
  font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
  font-size:   12px;
  line-height: 17px;
}

Answer 5

我也因此受到了影响 - 而且我非常喜欢Safari的老板呢！不相信它可能是一个但在他的浏览器中。此处有更多错误确认：http://redrata.com/2011/07/safari-woff-select-field-crash/

希望他们能尽快修复它，同时坚持使用网络安全字体。 Chrome是否也可以，因为它也建立在WebKit之上，或者代码库是完全不同的......

Answer 6

我也有同样的问题，我发现主要问题是由于CSS检查你的CSS，当你点击MAC中的下拉列表时停止重新加载

Answer 7

我也遇到了同样的问题，我通过使用jquery-browser插件检测浏览器来放置特定于Safari 11和12的自定义CSS来解决该问题，如果它是Safari 11或12，则我在在文档的头部内飞行。

select {
   font-family: inherit;
}

放置inherit可使您保持相同的外观。

希望这会有所帮助！

单击Safari 5.1选择菜单刷新页面

7 个答案:

最终答案：

原始答案：