当前位置：文江博客话题详情

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

发布于 2024-12-01 04:22:20 字数 535 浏览 0 评论 0原文

这既是一个问题，也是一个答案。我今天遇到了一个错误，这是我作为 Web 开发人员多年来从未见过的错误，因此我想与将来可能遇到该问题的任何人分享修复程序。我也很好奇是否有其他人经历过这种情况，以及是否有已知的原因。

此问题是 Mac 上的 Safari 5.1 所独有的。当单击选择下拉菜单时，页面将完全刷新。经过几分钟的调试，我得出结论，该错误是由......等等......在选择框上放置一个CSS边框引起的。（边框：1px 实线#ccc；）

WTF？

显然，Safari 的渲染引擎不喜欢这种风格，它破坏了整个页面。只有 Safari 5.1（5.0.3 就可以了），而且只能在 Mac 上使用。

当它发生时，在我公司的多个应用程序上，它是 100% 可重现的。但它并不是 100% 普遍可复制的，这意味着我不能随机访问任何网站并触发它。它必须是触发它的 CSS 规则或 html 标记的某种组合。

还有其他人见过这个吗？有什么具体情况可能导致这种情况的见解吗？如果没有，哦，好吧。我会将其归因于浏览器错误，并将这篇文章留给其他开发人员，以便他们在遇到相同问题时查找。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛装女皇 2024-12-08 04:22:20

最终答案：

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

我不确定您是否使用 TypeKit，但这将是首先查看的好地方。

原始答案：

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

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

找到存在此错误的页面，然后打开其他几个选项卡，您可以在其中登录 Google 帐户或其他帐户组。当您单击存在错误的站点上的选择框时，页面将刷新，其他选项卡中的会话也会重置。

更新：
我已经缩小了影响我们页面的 CSS 规则集的范围。这些CSS规则中的任何一个都会导致这种行为：

-webkit-appearance
border
border-style
border-radius
-webkit-border-radius
background-repeat
background-position
background-image

我最初认为它是 -background-image 属性这导致了问题，因为我们使用的是数据图像，而不是实际的 png 或 jpg （以提供样式与默认类似在 Firefox 中），但我显然错了。

更新 2： 我尝试使用 CSS 重置，使用 webkit 特定的 CSS hack，但仅仅触及这些 CSS 规则中的任何一个似乎都会导致事情变得混乱。我想我们需要删除这些规则，直到解决这个问题。

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

回复收藏 0 原文

不顾 2024-12-08 04:22:20

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

这样，该错误就会 (希望！）得到修复，以便未来的开发人员永远不会遇到它。

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

回复收藏 0 原文

尝蛊 2024-12-08 04:22:20

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

所以这就是我从你的答案中发现的一些内容...

在一个页面上我使用 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;
}

I also was experiencing the page reload / session clearing bug.

So here's what I found with some pointers from your answers...

On a page I was using GoogleFonts, and applying the CSS like so:

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

It seems Safari hates when you apply web fonts to select or option tags. Changing the code to this made the problem go away.

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

回复收藏 0 原文

北笙凉宸 2024-12-08 04:22:20

我也有这个问题。我通过删除所有选择的'font-face'指令解决了这个问题

回复收藏 0 原文

写给空气的情书 2024-12-08 04:22:20

我也遭受过这种痛苦 - 更确切地说，我热爱 Safari 的老板也遭受过这种痛苦！不相信他的浏览器中会出现“但是”。这里有更多关于错误的确认：http://redrata.com /2011/07/safari-woff-select-field-crash/

希望他们能尽快修复它，同时坚持使用网络安全字体。 Chrome 是否会好起来，因为它也是基于 WebKit 构建的，或者代码库有足够的不同......

回复收藏 0 原文

命硬 2024-12-08 04:22:20

我也有同样的问题，我发现主要问题是由于CSS检查CSS以在您单击MAC中的下拉菜单时停止重新加载而发生的

回复收藏 0 原文

南汐寒笙箫 2024-12-08 04:22:20

我也遇到了同样的问题，我通过将特定于 Safari 11 和 Safari 的自定义 CSS 解决了它。 12 通过使用jquery-browser插件来检测浏览器，如果是Safari 11或12，那么我在文档的头部内部动态添加以下样式。

select {
   font-family: inherit;
}

设置inherit 可以让您保持相同的外观和感觉。

希望这有帮助！

I also had the same problem, I solved it by putting custom CSS specific for Safari 11 & 12 by using jquery-browser plugin to detect the browser, if it was Safari 11 or 12, then I added the following style on the fly, inside the head of the document.