jQueryUI dialog position broken in Chrome and Safari

This seems really strange. Take a look at this fiddle in Firefox. http://jsfiddle.net/mjT5R/1/

Note that the fiddle is the jQueryUI basic dialog demo, verbatim.

The dialog, with no styling, appears in the center of the results frame. Now try in Chrome (my version is 8.0). It's at the top left, isn't it?

Now try adding some CSS (in Chrome). Add <link rel="stylesheet" href="http://www.jqueryui.com/themes/base/jquery.ui.all.css"> to the top of the H开发者_如何转开发TML section. When styled, the position magically works!

So what gives, why is Chrome (and Safari, according to our test team) not correctly positioning the dialog? It's not just the iframe - full screen result has the same problem.

You just need to add the following CSS:

.ui-dialog { margin:0 auto; }

...and it should center as you want it to. I updated your fiddle to show this.

I actually found that our css is outdated on our website. The css that makes it work is to have .ui-dialog have position: absolute. In the old version it's relative, which breaks it in Webkit.