Bootstrap 3 header example does not work properly with Firefox

[slozier]

The headers of the bootstrap 3 header example are not sizing properly with Firefox 53 (works fine with Chrome/Edge). When I load the page the example the headers are too wide. As soon as I resize a column, the headers get sized properly. If I reorder the columns, then the headers become once again too wide.

I found that by changing width to outerWidth on line 713 then things work properly, but I have no idea if this breaks other cases...

[6pac]

I can reproduce this (in FF 52). My best guess is it's a bug between jQuery 1.11.2 and FF 50ish, though I can't find one by googling. Hmmm ...

[slozier]

Also occurs with jQuery 3.1.1 which is the version I'm using. So probably with all the versions since 1.11.2?

[6pac]

OK. At first I thought it was getting headerColumnWidthDiff wrong, but that's the same on both. I wonder if its the interpretation of important flags. I seem to recall that was one fix for some of the Bootstrap stuff.

[pcurrivan]

Why was this closed? It's still a problem (with FF 52).

[6pac]

OK then. I'm not going to fix this, but if someone else does I'll happily integrate the workaround.

I closed it because it looks like a jQuery bug, so when that's fixed it should flow through without any changes here.

[pcurrivan]

I noticed this commented-out statement in slickgrid.css:

.slick-header-column.ui-state-default { ... /*box-sizing: content-box !important; use this for Firefox! */

Enabling this statement seems to fix this issue. I'm wondering why you wouldn't just enable it for all browsers. Seems like SG is designed for content-box. Maybe this is all that is needed and all the changes in my PR are unnecessary.

[ghiscoding]

this issue is old and doesn't seem to be an issue with latest version of Firefox v112, so closing. We are also dropping jQuery in our upcoming Roadmap to v4.0, that might help too