some background attachment disappear with gradients

[sebastienplat]

I am trying to create a responsive table, with shadows indicating an overflow on mobile from this article.

I wrap my tables in a div with the following css:

.table-wrapper {
border-radius:1px; // required due to a bug with bg-attachment: local in chrome android
overflow-x: auto;
background:
// these gradients hide the shadows when scrolling to the edges
linear-gradient(to right, white 30%, rgba(0,0,0,0)),
linear-gradient(to left, white 30%, rgba(0,0,0,0)) 100% 0,
// shadow ellipsis - do not move when scrolling
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) 100% 0;

background-repeat: no-repeat;
background-color: white;
background-size: 20px 100%, 20px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;    

}

Expected output:

background-attachment: local, local, scroll, scroll;

Actual output:

background-attachment: local, scroll;

I did not test with regular backgrounds, so I am not sure if it is only with gradients.