Header/Sidebar location+size jumping on load?

  • Resolved faranae

    (@faranae)


    6 years, 7 months ago

    Hello! I’ve been doing troubleshooting on this for a few days now trying to narrow it down but I’m quite stuck.

    **Issue persists even with all other plugins and CSS removed and caches cleared with only Twenty Seventeen + Options active, on both live and locally-hosted environments.** Chrome’s performance tool seems to point to something causing it mid page-load but I don’t know how to pinpoint it.

    Essentially, on most page loads I get a brief flash of the sidebar/header content at incorrect sizes in the middle of the page before it snaps to the correct placement and the main content loads. As this is planned to play host to content that will involve page changes in quick succession (a comic) this effect is very jarring/headache-inducing.

    I’ve captured the effect in the following gifs:

    With live CSS and plugins: https://i.imgur.com/1udgWqY.gif
    NO plugins or CSS: https://i.imgur.com/iabd4GS.gif
    Vertical jump occasionally on load with sidebar disabled: https://i.imgur.com/74z9n9g.gif

    I can stop the vertical “jump” entirely by adding a manual change to custom.header’s margin-top, but I haven’t figured out how to stop the horizontal jump and resizing of the sidebar content.

    I need to stress again that this behaviour persists even with all extra CSS removed (current on live is a disaster of a patchwork mess that needs to be cleaned) and all other plugins disabled/caches cleared, both live and in a locally-hosted environment across multiple browsers. I’m just stumped. 🙁

    Any assistance would be super appreciated, I’m more of a tinkerer/novice when it comes to this sort of thing and I’m in a bit over my head.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    Whoops! Should also mention, I’m on the upgraded version. 🙂

    Plugin Author Oliver Campion

    (@domainsupport)

    6 years, 7 months ago

    Hello,

    It is likely that this is what you are seeing is caused by JavaScript which is used to move elements on the page about once the document is ready.

    For example (and this is what we would imagine is the culprit) in order for pages to show the blog sidebar, it has to inject the sidebar HTML where it can and then jQuery is used to re-locate the sidebar HTML to the correct place once the page has loaded.

    Try turning off the following option to see if fixes the issue …

    “Customiser – Content Options – Page Sidebar”

    Oliver

    Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    I’m aware that entirely removing the element (and thus a third of of my page) will remove the flicker, as that is the object being moved late. :p

    What other workarounds might there be? The sidebar is a necessary part of the website at this point. Is there perhaps some way to manually set the size for the underlying elements with CSS so that the flicker no longer occurs when the script kicks in, as an example? It’s messy and far from ideal but it worked with the header flicker I was experiencing. If I know what class to target I can in theory tinker on my end, I just don’t know what is loading late.

    I appreciate the help. 🙂

    Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    In the meantime I’ve disabled the feature in the customizer as you suggested and enabled it again through a secondary plugin (Page Sidebar for Twenty Seventeen) which has resolved the issue/flicker entirely while still displaying the sidebar.

    I would prefer to not have to use this additional plugin for something already supported by this one, is there any way this flicker might be fixed or to be reported as a bug?

    Thanks again! 🙂

    Plugin Author Oliver Campion

    (@domainsupport)

    6 years, 7 months ago

    The plugin you mention uses its own template files which haven’t been updated for two years. During this time the actual theme has undergone ten new versions!

    Our plugin never changes the existing theme and in order to do this we have to inject additional HTML through hooks.

    One thing we can try is to hide the sidebar until it’s been moved to the correct location before showing it. We’ll let you know when this has been implemented.

    Oliver

    Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    Thanks a ton for the responses. 😀 I’ll keep an eye out!

    Plugin Author Oliver Campion

    (@domainsupport)

    6 years, 7 months ago

    Just pushed a new version of the plugin which hides the sidebar until it has been moved into place. Please take a look and let me know if this has resolved your “header flicker”.

    Thank you,

    Oliver

    Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    Completely gone! Thank you so much for pushing the fix. 😀 😀 😀

    Thread Starter faranae

    (@faranae)

    6 years, 7 months ago

    Replying one more time to try marking this as resolved as it didn’t stick last time. :S

    Plugin Author Oliver Campion

    (@domainsupport)

    6 years, 7 months ago

    Marvellous news!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Header/Sidebar location+size jumping on load?’ is closed to new replies.