Search code examples
javascriptcssgoogle-chromesafariwebkit

During resize Chrome and Safari don't update styles reliably (webkit bug?)

I have a layout where I need to call a resize function that resizes a bunch of individual elements when I resize based on other element widths. In Chrome and Safari it does not update the elements correctly although inspector says everything is perfect.

Note: this can't be done with CSS and isn't a responsive web design thing.

The problem seems to be some WebKit based bug that got carried over into Blink. It doesn't happen in Firefox or IE even back to 9. It only happens in Chrome and Safari. I have this code that fires on window resize

var els = this.getElements();

$(els.fauxTable).width($(els.contentContainer).outerWidth());

var sizes = [];
$(els.contentContainer).find('[data-id]').first().find('td').each(function(i) {
  sizes.push($(this).outerWidth())
  $(els.fauxHeaderContainer).find('th').eq(i).css('width', $(this).outerWidth());
});
console.log(sizes)

return this;

The console logs output the correct values and even more bizarre, you know how if you hover an element in the inspector in Chrome and Safari it highlights the element in the browser window? That position and width and height is perfect. If I change something completely unrelated to sizing like text color in the inspector it all snaps into place like it should.

Here's some screenshots after a resize. You'll see how the headers don't match. And the 2nd pic is after changing the text color and that's it

enter image description here

enter image description here

Does anyone know why this happens or how to work around this?

Solution

  • I think I've got a hack to get it to work. If I add this to the code above just above the return and below the console log it all works

    $(els.fauxHeaderContainer).hide().show(0);

    My assumption of why this works is because the browser is forced to redraw the element and all it's children.