Skip to main content

Bug Tracker

Side navigation

#12071 closed bug (wontfix)

Opened July 12, 2012 03:47PM UTC

Closed September 17, 2012 01:13PM UTC

Last modified September 28, 2012 12:04PM UTC

width() return correct value with one shift pixel on FF13

Reported by: guillaume.smaha@gmail.com Owned by: rwaldron
Priority: blocker Milestone: None
Component: css Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

When I use width() on a table tag, it returns the correct value minus one pixel.

To reproduce : http://jsfiddle.net/Mouxon/TRGHK/

Click several time on the button.

Attachments (0)
Change History (11)

Changed July 12, 2012 03:59PM UTC by rwaldron comment:1

component: unfiledcss
owner: → rwaldron
priority: undecidedblocker
status: newassigned

Changed July 12, 2012 04:11PM UTC by rwaldron comment:2

Further reduction, will be used as test basis: http://jsfiddle.net/rwaldron/cZSST/

Changed August 11, 2012 01:59PM UTC by mikesherov comment:3

rwaldron, .width() removes padding and border. In FF, table elements inherit the largest border of the first column in each row: http://jsfiddle.net/cZSST/7/ In Chrome, this is a different story. As a matter of fact, even their .css('width')'s are different as well.

My first thought here is "patchwelcome" or "cantfix", as it seems like the solution would involve a feature detect, followed by detecting if the thing you're asking for the .width() is a table, and then looking at the first td/th in every row, and seeing if that is effecting the border result.

Even then, I'm not sure if we could tell if the table's border is being screwed with by the td/th's border, because what if the td and the table have the same border width?

Let me know what you want to do here.

Changed September 04, 2012 12:58PM UTC by mikesherov comment:4

Looked into this further... there's more going on here than my previous comment suggests. Continuing to investigate.

Changed September 17, 2012 01:41AM UTC by rwaldron comment:5

@mikesherov I've narrowed it down to the existence of a 1px border causes the issue:

http://jsfiddle.net/rwaldron/QQm4R/

Changed September 17, 2012 02:35AM UTC by rwaldron comment:6

#12546 is a duplicate of this ticket.

Changed September 17, 2012 11:42AM UTC by mikesherov comment:7

rwaldron: figured out what's going on here. In 1.8, I separated out a difference between .css('width') and .width()... .width() respects box-sizing (in that it always attempts to both get and set actual content width), and .css('width') does not (in that it attempts to set the css version of .width()).

In firefox, the default box-sizing for tables are border-box, whereas it's content-box in the other browsers! : http://jsfiddle.net/xkhgT/5/

This is essentially wontfix as the solution is to just use .css('width') instead of .width(). I'm tempted to say that we can pave over this difference by redirecting table to use .css('width') when .width() is called, but that breaks the ability to use content-box for tables if you'd want to.

Thoughts?

Changed September 17, 2012 12:18PM UTC by jaubourg comment:8

  • We should probably tell Mozilla about this one,
  • CSS "resetters" should be told about this too.

Changed September 17, 2012 12:24PM UTC by mikesherov comment:9

Changed September 17, 2012 01:13PM UTC by rwaldron comment:10

resolution: → wontfix
status: assignedclosed

@mikesherov excellent sleuthing :)

Changed September 28, 2012 12:04PM UTC by mikesherov comment:11

#12625 is a duplicate of this ticket.