Skip to main content

Bug Tracker

Side navigation

#11132 closed bug (cantfix)

Opened January 06, 2012 09:10AM UTC

Closed January 11, 2012 03:47PM UTC

Last modified March 14, 2012 09:36AM UTC

.width() on hidden cell messes up table layout in Google Chrome

Reported by: romario333 Owned by:
Priority: low Milestone: None
Component: dimensions Version: 1.7.1
Keywords: Cc: timmywil
Blocked by: Blocking:
Description

When you call .width() on a hidden cell and than make it visible, the cell is shifted to the right from its original position.

This happens only in Google Chrome (16.0.912.63), in Firefox and IE the table renders correctly.

Here is a simple test case: http://jsfiddle.net/tuR2S/

Attachments (0)
Change History (8)

Changed January 06, 2012 03:20PM UTC by timmywil comment:1

component: unfileddimensions
priority: undecidedlow
resolution: → invalid
status: newclosed

There is a temporary swap occurring, but given that all of the settable properties are reset properly, the original fiddle can only be a webkit issue.

Nevertheless, if one uses jQuery to show it, the issue does not occur.

http://jsfiddle.net/timmywil/tuR2S/2/

Changed January 06, 2012 03:55PM UTC by romario333 comment:2

_comment0: It depends on what element you call width function. When you call it on a single cell, issue still occurs, even if you use jQuery to show it: \ \ http://jsfiddle.net/tuR2S/3/ \ 1326031376797622
_comment1: It depends on what element you call width function. When you call it on a single cell, issue still occurs, even if you use jQuery to show it: \ \ http://jsfiddle.net/romario333/9bqhA/ \ 1326031614994602

Changed January 08, 2012 02:06PM UTC by romario333 comment:3

Replying to [comment:1 timmywil]:

There is a temporary swap occurring, but given that all of the settable properties are reset properly, the original fiddle can only be a webkit issue. Nevertheless, if one uses jQuery to show it, the issue does not occur. http://jsfiddle.net/timmywil/tuR2S/2/

Not true, when you call show and width on a single cell, issue still occurs:

http://jsfiddle.net/romario333/9bqhA/

Changed January 08, 2012 03:27PM UTC by romario333 comment:4

I've reported this issue to WebKit project:

https://bugs.webkit.org/show_bug.cgi?id=75798

I believe jQuery should have workaround for this bug though as I don't know how long it will take guys at WebKit to fix it.

Changed January 11, 2012 10:45AM UTC by addyosmani comment:5

#11156 is a duplicate of this ticket.

Changed January 11, 2012 10:48AM UTC by addyosmani comment:6

cc: → timmywil
keywords: → needsreview
resolution: invalid
status: closedreopened

Re-opening as this was brought up again in http://bugs.jquery.com/ticket/11156. Given that the submitter believes this is a WebKit issue, do we feel it's widely enough experienced to even consider a workaround?

Changed January 11, 2012 03:47PM UTC by timmywil comment:7

keywords: needsreview
resolution: → cantfix
status: reopenedclosed

It seems the duplicate was created by the op of this ticket. @romario333: Let's keep the discussion of this issue in this ticket.

As I said before, I don't think there's anything we can do since the css is being reset to their original display values correctly, but webkit is not rendering as it should. A workaround is to show the cell in webkit with .css('display', 'block'), but this would not be viable for core.

http://jsfiddle.net/timmywil/9bqhA/1/

Changed January 12, 2012 08:54AM UTC by romario333 comment:8

Ok, I understand that this cannot be easily solved in core.

Your workaround works only in simple scenarios. Problem is that table cell's display should be "table-cell" rather than "block". When it's set to "block", it can lead to other formatting issues. But when you set it to "table-cell", workaround no longer works :(