Fixed child element in sticky parent blinking in Firefox browser - html

Question

I'm trying to create a header with position: sticky; and position: fixed; of one item inside it and second item without position: fixed;.
Here is the implementation: Codepen
The problem: when I open this Codepen in Chrome, everything is going well, but when I try this code in Firefox there is a strange blinking. You can try by yourself, just scroll down and up.
Just in case, here is the video: Youtube link
Here are the solutions that i've tried:
transform: translateZ(0); on header class is not working for me, because header__item stops moving.
Nested position: sticky; I can use position: sticky on header__item instead of position: fixed; but this solution is not working in Safari browser.
What I want: remove this blinking that you can watch on video.
Firefox version: 80.0.1 64-bit
OS: Ubuntu 18.04.5 LTS
NOTE: this bug may sometimes not reproduce on Windows (i don't know why), but always reproduces on Ubuntu or macOS operating systems. For Firefox 80.0.1 on my PC with Windows, everything works great.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 300vh;
}
.header {
width: 100%;
height: 250px;
background: green;
position: sticky;
top: -80px;
}
.header__item {
height: 150px;
width: 100px;
background: tomato;
position: fixed;
top: 0;
}
.header__second-item {
height: 80px;
width: 100px;
background: purple;
margin-left: auto;
}
<header class="header">
<div class="header__item"></div>
<div class="header__second-item"></div>
</header>

Answer 1

To start, try to replace from position: fixed; elements to position: sticky;
In Firefox, it will be fixed, but child elements with the sticky position are not supported by Safari.
The only way that I see - to detect the browser and replace the position in accordance with the browser.
For example:
.header__item {
position: fixed;
}
#-moz-document url-prefix() {
.header__item {
position: sticky;
}
}