单击Safari 5.1选择菜单刷新页面 [英] Clicking Safari 5.1 select menu refreshes page
问题描述
这既是一个问题，也是一个答案。我遇到了一个错误，我从来没有见过作为一个网络开发人员，所以我想与任何人谁可能会遇到这个问题的未来分享的修复。我也很好奇，如果其他人都经历过它，是否有一个已知的原因。
This is both a question and an answer. I encountered a bug today that I've never seen in all my years as a web developer, so I wanted to share the fix with anyone who might encounter the issue in the future. I'm also curious if anyone else has experienced it, and whether there's a known cause.
这个问题是Mac上的Safari 5.1独有的。单击选择下拉菜单时，页面将完全刷新。经过几分钟的调试，我能够得出结论，该bug是由...引起的...等待...在选择框上放置一个CSS边框。 （border：1px solid #ccc;）
The problem is exclusive to Safari 5.1 on a Mac. When a select dropdown menu was clicked, the page would completely refresh. After a few minutes of debugging, I was able to conclude that the bug was caused by ... wait for it ... putting a css border on the select box. (border:1px solid #ccc;)
WTF？
显然，Safari的渲染引擎不喜欢那种风格，它只是整个页面。它只有Safari 5.1（5.0.3很好），只有在Mac。
Apparently, Safari's rendering engine doesn't like that style, and it just nuked the whole page. It was only Safari 5.1 (5.0.3 was fine) and only on Mac.
在我的公司的多个应用程序上，它是100％可重复。但它不是100％可普遍再现，意味着我不能只是去任何随机网站和触发它。它必须是触发它的css规则或html标记的某种组合。
It's 100% reproducible when it's happening, on multiple applications in my company. But it's not 100% reproducible universally, meaning I can't just go to any random website and trigger it. It must be some combination of css rules or html markup that triggers it.
有没有人看过这个？任何洞察什么特定的条件可能导致它？如果没有，哦，好。
Has anyone else ever seen this? Any insight into what specific conditions might cause it? If not, oh well. I'll chalk it up to a browser bug and leave this post up for some other developer to find when they're having the same problem.
推荐答案
我找到了一个最终解决我们在我们网站上遇到的问题。网站加载后，我们有TypeKit库将字体附加到页面。当我特别将选择框上的font-family属性设置为除TypeKit字体以外的其他字体时，刷新行为不再呈现。
Final Answer:
I found a final fix for the problem we were specifically having on our site. After the site loads, we have the TypeKit library attaching fonts to the page. When I specifically set the font-family property on the select boxes to something other than the TypeKit font, the refresh behavior no longer presents itself.
我不知道if
我今天在我公司运营的某个网站上遇到了这个问题。我已经把它缩小到一系列的CSS规则，最有可能导致它（评论这些出来不会产生页面重新加载的错误）。
I encountered this issue as well today on one of the sites that my company runs. I had narrowed it down to a set of CSS rules that were most likely causing it (commenting those out would not produce the bug on page reload).
主要问题看到这可能是一个安全问题在浏览器本身。如果您在任何标签中有任何打开的会话，它也会清除其会话数据。
The main issue I see with this could very well be a security issue in the browser itself. If you have any open sessions in any tabs, it will clear their session data as well.
查找有此错误的页面，并打开其他标签页进入Google帐户或其他一组帐户。当您点击具有错误的网站上的选择框时，页面将被刷新，其他标签页中的会话也会重置。
Find a page that has this bug, and open several other tabs where you log into a Google account, or some other set of accounts. When you click the select boxes on the site with the bug, the page is refreshed, and the sessions in the other tabs are reset as well.
更新：
我已经缩小了影响我们网页的CSS规则集。任何一个CSS规则都会导致这种行为：
Update: I have narrowed down the set of CSS rules that are affecting our page. Any one of these CSS rules will cause this behavior:
- -webkit外观
- border-style
- border-radius
- -webkit-border-radius
- 背景重复
- 背景位置
- 背景图片
- -webkit-appearance
- border
- border-style
- border-radius
- -webkit-border-radius
- background-repeat
- background-position
- background-image
我最初认为这是导致问题的-background-image属性，因为我们使用数据图像，而不是实际的png或jpg（以给出类似于Firefox中默认的样式），但我显然错了。
I had originally thought that it was the -background-image property that was causing issues, as we're using a data image, instead of an actual png or jpg (to give a style similar to the default in Firefox), but I was apparently wrong.
更新2：我尝试使用CSS重置将事情恢复正常，使用 webkit-specific CSS hack ，但只是触摸任何这些CSS规则似乎导致事情去haywire。我想我们需要删除规则，直到有一个修复这个。
Update 2: I tried using CSS resets to put things back to normal using a webkit-specific CSS hack, but just touching any of these CSS rules seems to cause things to go haywire. I guess we will need to just remove the rules until there is a fix for this.
更新3：它似乎有事情要做将Javascript加载到页面上。如果我在Safari中禁用Javascript，则不会发生。
Update 3: It seems to have something to do with the Javascript being loaded on the page. If I disable Javascript in Safari, this does not happen.
这篇关于单击Safari 5.1选择菜单刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
