[Bug] Tingle does not work on a container grid with relative position below the nav with fixed position on portrait mobile

[gusbemacbe]

Hello,

Tingle works only on landscape mobile with less than 20 and 480 pixels. But not on portarit mobile.

On a testing page, it works strangely on on portarit mobile.

My project is particular, so I have to send to you by e-mail.

I tried #42. No luck.

Update

I found the bug – the nav class has fixed positive, the grid-container has relative position, and if I remove the relative position from the grid-container, Tingle will return to normal, but the nav is no longer fixed.

CSS

nav 
{
  overflow: hidden;
}

.nav-content 
{
  display: flex;
}

.nav-content a 
{
  align-items: center;
  display: flex;
  justify-content: center;
}

.nav-links 
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.gride-container *
{
  position: relative;
}

.gride-container
{
  display: grid;
  /* position: relative; */
  z-index: -1;
}

@media screen and (max-width: 48em)
{
  nav
  {
    position: fixed;
    width: 100%;
  }

  .nav-links 
  {
      position: fixed;
  }
}

HTML:

<nav>
  <div class="caixa-de-barra">
    <div class="nav-content">
       <div class="nav-links">
         <a href="#about">Quem Somos</a>
       </div>
    </div>
  </div>
</nav>

<div class="gride-container tingle-content-wrapper">
  <div class="secção-lacrei">
    <div class="item-1">
      <a class="js-secção-2-saiba-mais">
    </div>
  </div>
</div>

I provide https://jsfiddle.net/gusbemacbe/vnyrt2we/25/.

[robinparisi]

Hey @gusbemacbe,

The problem seems really specific to your layout. I encourage you to ask for help on Stack Overflow since tingle just use a fixed div to place itself. Maybe you need to find "colisions" with other CSS declarations.