Member Avatar for peepster

When I click on certain pages in my website, the pages are centered, but on others the entire page "shifts" to the right a little bit. all the pages on the drop down menu have a flash slide show so perhaps that's causing the pages to shift? Can someone take a look at this please? It's doing it in firefox, safari and chrome... Thanks!

  • 3 Contributors
  • 2 Replies
  • 73 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Building on points from , and , here are short, actionable ways to stop the visible nudge when moving between pages and simple tests to pinpoint the cause.

Try these CSS-first fixes (safe and easy to revert):

/* modern: reserve scrollbar space so layout won't shift */
html {
  scrollbar-gutter: stable;
}

/* fallback: always reserve vertical scrollbar space */
html {
  overflow-y: scroll;
}

Notes: scrollbar-gutter prevents width changes where supported; overflow-y: scroll forces a vertical scrollbar on all pages (harmless on platforms with overlay scrollbars). Test both and pick the one that looks best across your target browsers.

If you need a finer-grained fix, measure the browser scrollbar width at runtime and add equivalent right padding to your centered wrapper so its visual center never shifts. Example pattern (measure once, set a CSS variable) keeps layout stable without forcing a visible scrollbar.

Also check any embedded slideshow: give the slider a fixed height or a loading placeholder so it does not change the page flow during initialization. As an added note for modern readers: Flash is obsolete in current browsers — migrate slideshows to HTML5/JS sliders to avoid plugin-related quirks.

Quick tests: open a short page and a long page side-by-side, toggle the fixes, and test on macOS (overlay scrollbars) and Windows to confirm consistent behavior.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

That happens when the scrollbar disappears on short pages ...

Member Avatar for MJ Pieterse

IE keeps the scrollbar on the right hand side always, and dims it out when the page fits in the screen and it becomes active when you have to scroll, where FireFox, Chrome and Safari completely removes the scrollbar if the page fits, and only brings it in when a user has to scroll, and that is what is causing the 'jump' effect.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.