Chrome update (30.0.*) breaks remote bootstrap header / column sizing

treysta

It looks like the new Chrome 30 update is not compatible with remote datatables using the bootstrap styling. The headers & columns aren't lining up. Worked fine in Chrome 29, and still works in firefox & ie. It took hours to figure out where the problem was coming from, and more hours trying to figure out what broke with the chrome update, with no luck.

https://www.dropbox.com/s/it608kw5no7zfca/Screenshot%202013-10-08%2011.16.10.png

I can PM the login details by request for debugging purposes

Any help would be greatly appreciated!

Thanks,

Trey

allan

As with all posts, please link to a test case. As are as I can see with my own examples, the Bootstrap styling works okay in Chrome 30.

Allan

treysta

I just PM'd you the login info.

This also seems to be a duplicate of: http://datatables.net/forums/discussion/comment/52636

allan

I've just seen that other thread. This is the example posted there: http://jsfiddle.net/Ymq6s/ . It does indeed seem that something has changed in Chrome 30. Great...

Off the top of my head, I'm afraid I've no idea what is going wrong there. I'm going to have to spend some time debugging it.

Allan

puZakula

Thanks Allan, I think many are waiting for solutions :)

allan

Sounds like it! If anyone has a patch they want to contribute until I have some time to look at it, it would be warmly welcomed.

Allan

mpod

Hi,
we're having a working 95% solution by deactivating the bAutoWidth setting in the datatables constructor:

bAutoWidth: false

http://datatables.net/ref#bAutoWidth

We're doing some manual invocations of #fnAdjustColumnSizing(false) by several events (like window resize, item modification etc.) which adjusts all widths correctly in most cases.

Works on chrome 30, FF 20 and IE10 on win8 and osx. chrome 30 on ubuntu has some slight misalignments still but that's temporarily ok for us. At least our UI is usable again and we get some more time to find out what happens exactly.

We assume it has sth to do with header fields that have no textual or graphical content. Such fields might cause the width calculations to return strange results and thus the content table is misaligned.

cheers!

puZakula

Google Chrome 30.0.1599.69 m
http://joxi.ru/y11VUtg5CbDjI83_oO8

Google Chrome Canary 32.0.1664.3 canary Aura
http://joxi.ru/E15VUtg5CbBhJNV6eKs

At this point, if I understand correctly, must adjust to the main title, but the dimensions are taken into Chrome Stubley wrong with the Padding, Border and Margin

I do not have time now to look any further, I hope this has helped at least :)

allan

So this is indeed a Chrome 30 but. It would appear that a layout optimisation put in for Chrome 30 was a bit too heavy and will incorrectly calculate the width of table cells.

As a workaround, you can add a tiny amount of padding to your cells to cause this Chrome optimisation to be bypassed:

[code]
th, td {
padding-left: 0.00001%;
}
[/code]

The issue is discussed and recorded in this Chromium bug:
https://code.google.com/p/chromium/issues/detail?id=290399

Hopefully we'll get an update to Chrome 30 with the optimisation removed.

Allan

puZakula

I made the padding, as advised by Allan, had every TD right to insert DIV, in which the margin and do, but in general, the decision helps.

allan

Update - it appears the fix will be rolled into Chrome 30 via an update. Not sure when this will be able available though.

Allan

treysta

Awesome. Thanks for the follow up. I went ahead and implemented the workaround, and it seems to be working for me. It's ugly, but better than wrong sized headers/columns.

Any ideas on how to move left aligned text over without the padding? I tried margin-left & text-indent, which didn't seem to work...

allan

@treysta - perhaps padding-right would be better:

[code]
th, td {
padding-right: 0.00001%;
}
[/code]

?

Allan

Marcofil

Hi Everybody,

Do you have more news concerning when this issue will be resolved ?
Indeed, that impacts very much an application of my company.

Best regards.

allan

No sorry - its entirely up to the Chrome team and there isn't anything I can do about it other than suggest you use the workaround suggested above for the moment as it is a bug in Chrome and waiting for them to roll it out. If you want to do something you could comment on their bug or contact Google support if you have a corporate support contract with them.

Allan

jgoulet

Just an FYI - the latest update on this from the Chromium bug log:

"The bug has been fixed on the M30 branch, and is moving its way towards users. I'm closing this bug for comments. Thank you all for your help!"

They have not given an estimate as to when this will be pushed to live, so I guess we just have to hurry up and wait.

(https://code.google.com/p/chromium/issues/detail?id=290399)

Marcofil

FYI, I have updated Chrome at the moment and the problem is resolved.

allan

Whoohoo. Appears to be fixed for me as well :-)

jgoulet

Confirmed that my site is now rendering correctly as well.

Chrome Version 30.0.1599.101 m

:)

Marcofil

Hi, it was working but since the new Chrome release, the problem seems to appear again. Any news on that ?

Marcofil

Chrome version is Version 31.0.1650.57 m

adinaadler

If you go to the link for the Chrome bug, you'll see that it's the same problem, just that it didn't get merged to all the right places. They're working on it.

allan

Yup - looks like they fixed in in 30 after initial release, but 31 was forked off before they fixed the bug on 30.x. Doh.

From the bug, as adinaadler says, they are working on it now.

Allan

sdinesh21

Allan,
With the workaround, the sorting image on the header gets overlapped. Is there a workaround to fix this?

allan

A workaround for the workaround? :-). Not as far as I am aware. We just need to wait for the Chrome folks to push out their fix...

Allan

sdinesh21

Looks like Chrome issue is fixed in a release today. Works fine! :)