CSS How to prevent background showing through when scrollbar is active

Question

Does anyone know how to remove the thin gap to the left of the scrollbar that is letting the background through (showing green on this example)?

.menu {
   min-width: 195px;
   max-height: 200px;
   overflow: auto;
   position: fixed;
   background-color: #F9F9F9;
   border: solid 1pt yellow;
}

.button {
  border: solid 1px white;
  min-width: 200px;
}

body {
  background-color: green;
}



   a
   b
   c
   d
   e
   f
   g
   h
   i
   j
   k
   l
   m
   n
   o
   p

A running example of this can be found on https://jsfiddle.net/Abeeee/f9jtsrw0/29/

user_4101210 · Answer

I've added border-right: 0pt; to the menu css which removes the right border.

.menu {
  width: 200px;
  height: 195px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  background-color: #F9F9F9;
  border: solid 1pt yellow;
  border-right: 0pt;
}
.button {
  border: solid 1px white;
  width: 200px;
}
 body {
  background-color: green;
}
.background {
  background-color: white;
  z-index: -1;
}


  
  a
  b
  c
  d
  e
  f
  g
  h
  i
  j
  k
  l
  m
  n
  o
  p

user_10441671 · Answer

It seems like a bug to me but I replaced:

border: solid 1pt yellow;

from your .menu with:

border: solid 1px yellow;

The pt seems to make rounding errors occur.

CSS How to prevent background showing through when scrollbar is active

2 Answers