#9133 closed bug (fixed)

Opened March 04, 2013 04:56AM UTC

Closed September 30, 2013 07:35PM UTC

Last modified November 26, 2013 08:45PM UTC

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.

Attachments (0)

Change History (13)

Changed March 04, 2013 05:08AM UTC by scottgonzalez comment:1

owner:	→ net147
status:	new → pending

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

Changed March 04, 2013 05:10AM UTC by net147 comment:2

status:	pending → new

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

Changed March 04, 2013 05:13AM UTC by net147 comment:3

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.

Changed March 04, 2013 02:46PM UTC by tj.vantoll comment:4

status:	new → pending

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?

Changed March 04, 2013 11:28PM UTC by net147 comment:5

status:	pending → new

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

[[Image(http://img.acianetmedia.com/i/ijh4B.png)]]

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

Changed March 07, 2013 03:55AM UTC by tj.vantoll comment:6

status:	new → open
summary:	Resizing dialog causes close icon to misalign on Firefox → Dialog: 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.

Changed April 11, 2013 02:22AM UTC by tj.vantoll comment:7

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.

Changed September 30, 2013 10:22AM UTC by jzaefferer comment:8

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?

Changed September 30, 2013 02:15PM UTC by uGoMobi comment:9

_comment0:	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 eachother. → 1380554192357686

_comment0:

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 eachother. → 1380554192357686

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.

Changed September 30, 2013 07:35PM UTC by Jasper de Groot comment:10

resolution:	→ fixed
status:	open → closed

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

Changeset: ec3cf6725aa5ae0c69cb302df92eb933a517cbaa

Changed September 30, 2013 07:36PM UTC by scottgonzalez comment:11

milestone:	none → 1.11.0

Changed November 26, 2013 08:12PM UTC by Jasper de Groot comment:12