Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#9133 closed bug (fixed)

Dialog: Resizing causes close icon to misalign in Firefox

Reported by: net147 Owned by: net147
Priority: minor Milestone: 1.10.4
Component: ui.dialog Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (13)

comment:1 Changed 5 years ago by Scott González

Owner: set to net147
Status: newpending

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

comment:2 Changed 5 years ago by net147

Status: pendingnew

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

comment:3 Changed 5 years ago by 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.

comment:4 Changed 5 years ago by tj.vantoll

Status: newpending

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?

comment:5 Changed 5 years ago by net147

Status: pendingnew

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

http://img.acianetmedia.com/i/ijh4B.png

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

comment:6 Changed 5 years ago by tj.vantoll

Status: newopen
Summary: Resizing dialog causes close icon to misalign on FirefoxDialog: Resizing causes close icon to misalign in Firefox

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.

comment:7 Changed 5 years ago by 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.

comment:8 Changed 4 years ago by 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?

comment:9 Changed 4 years ago by 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.

Last edited 4 years ago by uGoMobi (previous) (diff)

comment:10 Changed 4 years ago by Jasper de Groot

Resolution: fixed
Status: openclosed

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

Changeset: ec3cf6725aa5ae0c69cb302df92eb933a517cbaa

comment:11 Changed 4 years ago by Scott González

Milestone: none1.11.0

comment:12 Changed 4 years ago by 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

comment:13 Changed 4 years ago by Scott González

Milestone: 1.11.01.10.4
Note: See TracTickets for help on using tickets.