webkit-transform on overflow:auto div results in very wide scrollbar in Chrome/Safari

Question

I am using a content editable div with "overflow: auto" and "-webkit-transform: scaleX(1.3)". The transform causes the scroll bar to become very wide in Chrome/Safari on OS X and in Chrome on Windows. My question:

• How can I make the scrollbars not show wider (i.e., their original width)?

---

Additional details:

• The value for scaleX, though fixed in this example, is not fixed in the code this example is derived from.
• I need to set the width of the scrollbar dynamically to match the transform:scaleX factor

• The HTML:

  <div id="overflow" contenteditable="true">Hey
    lots
    of
    text
    here
    to
    over
    flow
  </div>
  

• The CSS:

  #overflow {
      width: 100px;
      height: 100px;
      white-space: pre-wrap;
      margin: 0px;
      overflow: auto;
      padding: 2px;
      border: 1px black solid;
      -webkit-transform: scaleX(1.1);
  }
  

Answer 1

Because you -webkit-transform scaled the whole elements 1.1 times of the size, so you need use the ::-webkit-scrollbar to customize the scrollbar style.

Also you need to use other -webkit-scrollbar pseudo elements to customize the style of the scrollbar.

Here is the DEMO.

::-webkit-scrollbar {
  width: 12px;
 }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
 }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }

If you need the default style, you need to do more css customize based on the demo.

Hope this can help.