Fixed child element in sticky parent blinking in Firefox browser

user_14260640 0
Viewed 329

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>

firefox css html
1 Answers

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;
  }
}
user_76466030
Related