[SOLVED] Elements briefly disappear and reappear on Chrome 77

Elements briefly disappear and reappear on Chrome 77

I have a tabbed UL that briefly disappears on Chrome 77 when li > a is clicked. When it reappears it appears behind the element below it (almost like it literally disappeared from the DOM and then the element below it moved in it's place or something)

Here are some notes:

If you reload the page the problem doesn't generally occur
It only happens if you navigate to the page from somewhere else
If you inspect any element and uncheck any css property on the page the problem immediately corrects itself

I'm using suitecommerce which I don't have full control over the source code. And if you know anything about Suitecommerce I can't really rely on their developers to fix anything in a timely manner.

To reproduce the problem:

Here's an example page: https://www.1800cpap.com/airfit-p30i-nasal-pillow-cpap-mask-by-resmed

Once you land on the page, scroll down to the tabbed section and click any tab. If you don't see the problem you might have to navigate away from the page and back to it OR you can navigate to any product page. Once you see the problem inspect any element, uncheck any css property and the problem will be fixed instantly. It only happens on Chrome 77.

I'm happy to provide code but I'm honestly not sure where to even start. The platform is built using backbone.js

Any thoughts would be welcomed.

Solution

The issue comes from your tabs list that has height 0. Why? => read here

This code should fix it:

ul.product-details-information-content-tabs {
    float: left;
    width: 100%;
    margin: 0;
}