ブラウザの拡大・縮小で大きさの変わらない要素を作りたい

質問内容

ブラウザの機能で拡大・縮小表示しても幅の変わらない要素を作りたいのですが、何か方法はありますでしょうか？

質問理由

webkit系ブラウザ（SafariやChrome）において、CSSでスクロールバーの幅を指定すると、ブラウザの機能で拡大・縮小表示した際に、スクロールバーの幅まで拡大・縮小されるようになってしまいます。

スクロールバーの幅を指定していない状態（デフォルト）では、ブラウザの機能で拡大・縮小表示してもスクロールバーの幅は変わりません。

スクロールバーの幅が拡大されてしまうとダサいので、ブラウザで拡大・縮小表示してもその幅は変えないようにしたいのですが、可能でしょうか？

任意の要素ではなくて、少なくとも、スクロールバーの幅において上記のことが達成されればそれで十分なのですが。

webkit系ブラウザでbody要素のスクロールバーの幅を指定するCSSは、以下のコードで与えられます：

css
1body::-webkit-scrollbar {
2  width: 15px;
3}

もう少し補足

そもそも、スクロールバーの幅は15pxがデフォルトだと思いますが、この値はそのままでも構わないのです。

しかし、::-webkit-scrollbarにwidthを改めて指定しないと、スクロールバーの色などのスタイルを::-webkit-scrollbar-trackや::-webkit-scrollbar-thumbで指定しても何故か無視されてしまいます。

はじめの質問に対しての回答があればベストですが、ここで述べた問題を何とかしてもらうだけでも個人的には満足です。

何とかならないでしょうか？

スクロールバーのスタイルを指定するサンプルコード：

css
1body::-webkit-scrollbar {
2  width: 15px; /* 必要 */
3}
4body::-webkit-scrollbar-track {
5  background-color: blue;
6}
7body::-webkit-scrollbar-thumb {
8  background-color: rgba(#fff, .3);
9  border: 3px solid transparent;
10  border-radius: 10px;
11  background-clip: content-box;
12}