Prevent scroll-bar from adding-up to the Width of page on Chrome

[marcm59726865]

Prevent scroll-bar from adding-up to the Width of page on Chrome

Hi. I'm with this problem below

I have a small issue trying to keep my .html pages at a consistent width on Chrome. For example I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page (2) i have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there. The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2)

I'm a beginner on HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but i had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.

The worst thing for me is that when the page is resized, the images also are, and this makes the images lose sharpness.

Here is an example of how the vertical scroll bar makes the images reduce in size and lose the sharpness:

http://marcelomaldonado.com/test/index.html

How to prevent the decrease in page width regardless of the vertical scroll bar in Google Chrome? In IE and Edge this problem does not happen.

Thanks for the assistance !

[Ken_Binney]

Some pages are long enough to need a vertical scrollbar. When that scroll bar kicks on, the actual width of the page changes slightly, so the content will shift to the left when the scroll bar appears.

You can force a scroll bar to every page on your site and your pages won't shift if you add in overflow-y:scroll to the body tag css....

body {

     overflow-y:scroll;

}

[marcm59726865]

Thanks for the reply, Ken. What I want is that the scroll bar does not resize the page content, even if it remains above the page content or cut part of the page's content (as in IE and Edge), without resizing anything.

See the images below. I want the scroll bar does not resize the page content (as with IE, Firefox and Edge).

[Nancy OShea]

You can't change how browsers behave, I'm afraid.  Web designers must learn to live with and accept browser variations. It comes with the territory.

Adjust your page layouts to make them less wide and do as Ken suggests which is to add a vertical scrollbar channel to all pages regardless of whether or not they actually need it.

Nancy O.

[Nancy OShea]

Also, consider adding some right padding to content on the right edge of your page.  It always feels claustrophobic to me when content stretches to the far reaches of my browser's chrome.

Nancy O.