1563984 - Interaction in between display: grid and display:none elements are not properly drawn

Status: RESOLVED INCOMPLETE

(Core :: Graphics, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This was initially reported on https://webcompat.com/issues/33879

I was able to reproduce only once on a couple of attempts, but only on Focus. I was not able to reproduce on Firefox Preview. And it seems I can reproduce if I activate tracking protection. But with TP off, it doesn't seem to happen for me (or it is just by chance).

But to try to make sense of it:
There is this header which is set with display: grid

<header id="masthead" class="site-header animated headroom--top headroom--not-bottom">
  <div class="site-branding">
    <a href="https://www.flyinghomes.co.uk/" class="custom-logo-link" rel="home" data-wpel-link="internal">
      <img src="https://cdn.flyinghomes.co.uk/wp-content/uploads/2018/09/fhlogonew.png" class="custom-logo" alt="Flying Homes" width="120" height="126">
    </a>
    <p class="site-title">
      <a href="https://www.flyinghomes.co.uk/" rel="home" data-wpel-link="internal">Flying Homes</a>
    </p>
    <p class="site-description">Cash House Buyers</p>
  </div>
  <div class="site-maintitle">
    <p class="site-mslogan">The Property Buyer
      <br>
      <span class="site-phone">Call
        <a href="tel:[phone]" data-wpel-link="internal">0800 68 99 420</a>
      </span>
    </p>
  </div>
  <div class="mobile-menu hide-tablet" style="display: flex;">
    <a href="#main-menu" role="button" id="main-menu-toggle" class="menu-toggle" aria-expanded="false" aria-controls="main-menu" aria-label="Open main menu" data-wpel-link="internal">
      <span class="sr-only">Open main menu</span>Menu</a>
  </div>
  <div class="headright" id="headbottom">
    <p>
      <span>Apply online, agree a price, set a date</span>
      <a href="#" id="offerlink" data-wpel-link="internal">Make me an
        <span>offer</span>
      </a>
    </p>
  </div>
</header>

The last div (aka #headbottom) is set as display: none. but if we remove the display: none we can see that the block is high and narrow. grid?

Also the site header has some before/after to clear the space.

.clear::after, .clear::before, .comment-content::after, .comment-content::before, .entry-content::after, .entry-content::before, .site-content::after, .site-content::before, .site-footer::after, .site-footer::before, .site-header::after, .site-header::before {
	content: "";
	display: table;
	table-layout: fixed;
}

Sometimes when I deactivate the display: none on .headright, the page is not repainted and leaves me indeed with a big blue area. This looks like a Graphics issue on GeckoView.

See the screenshots there.

Comment 1

[Dennis Schubert [:denschub]]

The site has changed, and it's unclear what caused this issue.