Dialog: Resizing causes close icon to misalign in Firefox

[net147]

Viewing example on ​http://jqueryui.com/dialog/ with Firefox 19.0, you can see the close icon becomes misaligned by a pixel if you resize the dialog larger.

[Scott González]

I'm not seeing this behavior. Which OS are you using?

[net147]

I am using Windows XP Professional x64 Edition SP2. Click down on the bottom right corner and drag to the right a little.

[net147]

It also seems to depend on the size of the browser window. On another computer running Windows 7, I had to make the browser window smaller and reload the page to see the issue.

[tj.vantoll]

BrowserStack does not have Firefox 19 available yet but I couldn't recreate this on Firefox 18 on Windows XP, Firefox 18 on Windows 7, or Firefox 19 on OS X. Could you please post a screenshot of the display issue you're seeing?

[net147]

Before and after resizing dialog in Firefox 19.0 on Windows XP Professional x64 Edition SP2:

Notice after resizing, the x close icon is misaligned by 1 pixel to the right.

[tj.vantoll]

Ok I see it on OS X as well now, the screenshots were helpful. I indeed see the issue only in Firefox, not IE/Chrome/Safari/Opera.

[tj.vantoll]

I believe this is a subpixel thing as the icon moves back and forth by a pixel as the dialog is resized. The .ui-dialog container in the demo has a fractional width and left. Can't put my finger on exactly what's up though.

[Jörn Zaefferer]

I can reproduce this as well in Firefox 24, though the behaviour is pretty random. Sometimes it looks right, sometimes it doesn't, but resizing the dialog doesn't seem to make any difference. The deciding factor seems to be the window size.

I was able to fix this by replacing left:50% with left: 9px; in jquery.ui.button.css, for the ".ui-button-icon-only .ui-icon" selector. Since that selector comes with "margin-left: -8px;", is there any reason we have to use a relative value for "left", when using an absolute pixel value for margin-left anyway?

[uGoMobi]

I have been able to reproduce this on Firefox and Chrome. On OS X with Retina screen and on Windows 7.

The problem starts with width: 21px; for the button element. That makes the width of the button (box-sizing: border-box, 1px border, 1px padding) 17px while this should probably be 16px, same as the icon span.

The left offset is 50% of 17px = 8.5px and the half pixel seems to be the cause of the different positioning, depending on window size. Solution is to change the width to 20px. You could remove the rule .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } because they negate each other.

Update: .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } is needed for other icon-only buttons that have a different width so it can't be removed.

[Jasper de Groot]

Dialog: Changed the width of the close button. Fixed #9133 - Dialog: Resizing causes close icon to misalign in Firefox.

Changeset: ec3cf6725aa5ae0c69cb302df92eb933a517cbaa

[Jasper de Groot]

Dialog: Changed the width of the close button. Fixed #9133 - Dialog: Resizing causes close icon to misalign in Firefox. (cherry picked from commit ec3cf6725aa5ae0c69cb302df92eb933a517cbaa)

Changeset: fd80c3445d3102519b7f9e0e549bc7d352bc2e56