可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

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?

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.

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.

回答1:

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.

I'm not sure if you're using TypeKit or not, but that would be a good place to look first.

Original Answer:

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.

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.

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-appearance
border
border-style
border-radius
-webkit-border-radius
background-repeat
background-position
background-image

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.

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.

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.

回答2:

You should file a bug report: https://bugs.webkit.org/

That way, the bug will (hopefully!) get fixed so that future developers will never chance upon it.

This issue has since been fixed a while ago: https://bugs.webkit.org/show_bug.cgi?id=65350

回答3:

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;
}

回答4:

I had this issue too. I solved it by removing the 'font-face' instruction for all selects

回答5:

I too suffered from this - well rather my Safari loving boss did! Didn't believe it could be a but in his browser. There is more confirmation of the error here: http://redrata.com/2011/07/safari-woff-select-field-crash/

Hopefully they will fix it soon, in the meantime stick to web safe fonts. Is Chrome going to be okay as it's built upon WebKit too, or are the code bases sufficiently different...

回答6:

I have also same problem and i found the main problem is occurred due to CSS check your CSS to stop reload when you click on dropdown in MAC

回答7:

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.