React-grid-layout: Children content flickering on grid resize

[bgold0]

Has this every happened to anyone? I'm having trouble replicating this on codesandbox.

https://streamable.com/kdg4k

This is all my code is essentially:

<ResponsiveGridLayout
    className="layout"
    breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
    cols={{ lg: 2, md: 2, sm: 2, xs: 1, xxs: 1 }}
>
    <div key="a" data-grid={{ x: 0, y: 1, w: 1, h: 3, minH: 2 }}>
        sdsdsd
    </div>
    <div key="b" data-grid={{ x: 1, y: 1, w: 1, h: 3, minH: 2 }}>
        test
    </div>
</ResponsiveGridLayout>

[MilesMorel]

This happened to me too. It turned out to be the css ::selection pseudo-element that was changing to the background color while resizing.

[artem-ovcharenko-codilime]

Hello guys, I have same problem.
@bgold0, as @MilesMorel mentioned it is because elements becoming ::selection.
as i see threre are two lines of code are doing that:

styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {background: transparent;}\n';

styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {background: transparent;}\n';

By default selected elements have white color. With own transparent background, selected element 'has' parent's background color - in our case it is white - thats why it flickers.

For now i use this adhock solution:

.react-draggable-transparent-selection {
  span, div, a {
    &::selection {
      color: inherit;
    }
  }
}

But would be greate if somebody from @STRML team, will fix this problem, because it looks like a bug, moreover it is hard to find reason of this blinking.

[zaykaalexander]

1) Google Chrome - OK
2) Mozilla Firefox - OK
3) Opera - OK
4) Microsoft Edge - OK

[daynin]

I'll close it for now