One issue of jQueryUI Dialog Header

One issue of jQueryUI Dialog Header

Hi,

Today I met one dialog issue. When you run below code, make the dialog smaller to see the scrollbar appeared and then click the 'click me' hyperlink in the dialog, you can find the dialog header be moved up a little. This is a very strange behavior and related with scrollbar. If no scrollbar exists, it works well.

Both IE and Chrome have this problem. Would anyone give some comments about the strange behavior?

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.8.3.js"></script>
  4. <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
  5. <link rel="stylesheet" type="text/css" href="jquery.ui.all.css" />
  6. <script type="text/javascript" src="jquery-ui.js"></script>
  7. </head>
  8. <body>
  9. <div id="dialog">
  10. <a name="begin" href="#end">click me</a>
  11. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  12. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED. 
  13. <a name="end">END</a> 
  14. </div>
  15. <script language="javascript">
  16. $("#dialog").dialog({title:"dialog title",width:200,height:100});
  17. </script>
  18. </body>
  19. </html>