ColResize: strange visual effect in chrome

[rockshandy]

First I'd like to say awesome plugin for the newer version of DataTables! I've been experimenting with column resizing with scrollX set which seems to work fine in Firefox. When I resize columns in chrome, some of the column content (and headers) are a little glitchy.

Sometimes half the cell (dived horizontally) will move or header text will disappear. It does correct itself once I move my mouse over the strange looking area, updating to what would expect. This doesn't seem to happen if disable horizontal scrolling.

Here are my initial options to DataTables:

{
  deferRender: true,
  scrollX: true,
  dom: 'lrtpRJ',
  colResize: {
    fixedLayout: true,
    minWidth: 40
  }
}

I also have some basic css for overflow:

table.dataTable td, table.dataTable th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Have you seen this happen before?

[maca88]

Thanks,

it seems that the current version of Chrome has this glitch, previous haven't. Sadly I tried the Canary version and the glitch is still there :( At the moment I don't have a clue how to fix that. Example

[rockshandy]

Ah that is a shame (but at least I'm not crazy?). I was experimenting with some things, and it seemed like after a resize I could at least call DataTable().draw(false) to clean up the table in chrome. Without editing ColResize itself, I wasn't sure when the perfect time to do that would be.

[maca88]

Interesting... I will probably call the draw function when Chrome is used... in the meantime you can do something like this: Example

[rockshandy]

Ah that does seem like a good way of doing things for now, thanks. I haven't dived to deep into the code but I see why this would work.

[maca88]

I found a fix for this issue using a css trick. Example

[rockshandy]

Oh good find! I will update my code and remove that previous bit of code.