Styles applied later (BS)

[strarsis]

@e-oj:
When using BrowserSync, extra styles are injected by it after the JavaScript ran
(vanilla document ready used).
This means Magic-Grid would distribute the items as they are unstyled,
then, when the extra styles are injected by BrowserSync, the items are not re-distributed and
with their new styles and dimensions are now incorrectly placed and overlap.
Static mode is used, the items don't change on DOM-level.

Ideally Magic-Grid can use a MutationObserver for redistributing on changes to the items,
even static ones, so this kind of issue is fixed at its cause.

[e-oj]

From what I understand, browsersync is making delayed changes to the styles (It would be helpful if you had reproduction steps). This should not affect the structure of the DOM. You can use the positionItems function to "fix" the grid after styles have been added.

I'm not too sure about using MutationObserver but It has to be discussed. I think, in the vast majority of cases, the developer is in control of adding and removing elements from the DOM so the positionItems function should be sufficient. We don't really want to reposition whenever the style of a single item changes; that's a specific use case and it can be handled easily by the developer with the positionItems function.

Let me know what you think.

[strarsis]

@e-oj: A workaround is used now which uses ResizeObserver (with Polyfill) and setTimeout to call positionItems after size change and after some delay (apparently size change alone isn't sufficient).