Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

I think Fernando posted this in the wrong section

Hi Eugene,

As your Filtering plugin/section loads, it extends the space it occupies. In result, putting it above your page on mobile pushes down everything as it loads.

Aside from caching, you can probably try adding a min-height to your left side bar on mobile to reduce the CLS or the way it pushes down all other content as it loads.

Example:

@media (min-height: 768px){
div#left-sidebar {
min-height: 1400px;
}
}

Hi there,

did Fernandos suggestion work for you ?

No, it didn't work. The reason I think is because the theme outputs the Content followed by the Sidebar, and only then the "reverse" CSS is applied. So the code doesn't work because when the page is loaded, the left-sidebar isn't at the top yet, causing the CLS issue.

I found a very hacky way of getting around it though. Instead of setting the sidebar min-height, I added a massive margin-top:100vh; on #primary:

/* Left Sidebar on top on mobile */
@media (max-width: 768px) {
  /* Combat the CLS. See *.js line 179 */
  #primary {
    margin-top:100vh;
  }  
  .left-sidebar .site-content {
      display: flex;
      flex-direction: column-reverse;
  }
}

Then I am setting the initial margin-top with JS once the page has loaded:

// Combat the CLS issue. Set CSS to offset the switch.
// See stlye.css line XXX
window.addEventListener('load', function () {
    const content = document.getElementById('primary');
    content.style.marginTop = 'initial';    
})

Please let me know if you are in agreement with this code?

An alternative option would be to Hook the Filters in above the main_content using a Block Element. You can then use CSS to hide them on desktop, and hide the sidebar on mobile.

In theory, as long as those widgets are not resizing they will be the first thing to load on mobile....

Its CSS hacky instead of JS hacky :) lol

Hi There David

Hope you are well

I realised now that the CLS score on desktop is also being affected and I did some digging.

I realised that no matter what I try, the sidebar is still being loaded after the content and then re-ordered with CSS. As a result, it seems like the void in which the sidebar can't be fixed no matter what CSS I add. I've disabled all my own CSS apart from the shadow to demonstrate the shift in my gif.

This is avoidable on Mobile, but not really on Desktop i found.

Is this a known issue?

See screenshots and recording:
Screenshot: https://prnt.sc/eSy81U3dbgZM
Recording: https://drive.google.com/drive/folders/14l8A6wql58wHkVjind1dyroJEiY_Npdp

Can you share a link to that page ?

Hi David

Posted in the private information

Try adding this to your CSS:

@media(min-width: 769px) {
    #primary {
        margin-left: auto;
    }    
}

As long as your optimizations don't mess with the CSS loading order, that should keep the main content content pushed to the right.