MightyHive / chrome-extension

0 stars 0 forks source link

Chrome bug requires hack for Popup #4

Closed jreidgreer closed 7 years ago

jreidgreer commented 7 years ago

Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=428044

Description

Basically, the issue stems from rapid changes in the sizing of the Popup during initialization. Forcing a redraw fixes the issue. Because Chrome's rendering engine checks diffs on sizing changes to avoid unnecessary redraws, we have to make it a different size than its previous state.

For example:

const { height } = document.body.getBoundingClientRect();
document.body.style.minHeight = `${height + 1}px`;

We add an extra pixel to the min-height property on the body element. It's not ideal, but it does fix it. The cost of this fix is that Chrome does not do its sizing transition on the Popup container.

It's easiest to identify this bug on pages with tons of data on them that require a bit longer of a bootstrapping of the React component. I tested against Facebook since they pull in hundreds of network requests.

mrezo commented 7 years ago

That makes sense. This workaround will totally work. 1 pixel is too bad. We can deal with that. Thanks for the quick identification of the issue.

jreidgreer commented 7 years ago

Update: I discovered that while this does fix this 99% of the time, sometimes there is a race condition and Chrome still experiences the bug. Because of this, and the loss of the transition, I just changed to using a preset height for loading & app view. I think this is the best solution.

mrezo commented 7 years ago

Sounds good.