CSS is being displayed on page shortly before being hidden

Current behavior:

The CSS is being displayed within the page before being hidden. (flash)

Here’s the content that’s being displayed:

<style data-emotion="css 1s3l8we" data-s="">.css-1s3l8we{margin:0 45px 0 45px;position:absolute;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.css-1s3l8we:focus{outline:none;}.css-1s3l8we .label{cursor:default;}@media (max-width: 991.98px){.css-1s3l8we{width:100%;-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;margin:0;}.css-1s3l8we .label{margin-left:25px;}.css-1s3l8we .stamps,.css-1s3l8we .links,.css-1s3l8we .contact,.css-1s3l8we .column-divider{display:none;}}</style>

It’s been happening for months, it’s not something new.

To reproduce:

Happens only within my private app and I don’t know what’s causing this, can’t reproduce it.

Go to https://tfp-sc1-2l-1c-xp-37wm0wymn-unly.vercel.app/en/solutions displays the flash. Lowering the network speed (Console Network settings) makes the transition a bit slower.

Expected behavior:

It shouldn’t display the CSS on the page

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.1.4

[Andarist]

I haven’t seen such warnings. Where are they supposed to be displayed?

Not all selectors are validated right now - the detection could definitely be improved there. The logic for it is here: https://github.com/emotion-js/emotion/blob/71ca9be3368ddb0a95ef5b2db7a97c67ab440593/packages/cache/src/stylis-plugins.js#L133

[Vadorequest]

Using

> div {
  display: flex;
  align-items: center;

  @media (min-width: 992px) {
    display: flex !important; // Overrides bootstrap to force using flex with desktop to center vertically elements
  }
}

instead of

> * {
  display: flex;
  align-items: center;

  @media (min-width: 992px) {
    display: flex !important; // Overrides bootstrap to force using flex with desktop to center vertically elements
  }
}

fixed the issue.