I have three backgrounds on a scrolling item, all of the multiple values are working properly except for background-attachment in Chrome, it's using scroll for all of them. It's in a Shopify SCSS file, but I've put the same code into CodePen and the bug is still there.
The shadow cover is a white/transparent/white gradient that masks the shadows and should scroll with the container, the shadows should be visible when there is scrollable content in one direction or another.
It's based on this old (2012) post by Lea Verou: http://lea.verou.me/2012/04/background-attachment-local/
.external-list__values {
padding-left: 5%;
margin-left: 0;
float: left;
height: 200px;
overflow-y: auto;
background-image:
/* Shadow cover */
linear-gradient(rgba(255,255,255,1) 5%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%,rgba(255,255,255,1) 95%),
/* Shadow */
radial-gradient(grey,rgba(grey,0) 70%),
radial-gradient(grey,rgba(grey,0) 70%);
background-attachment:
/* Shadow cover */
local,
/* Shadow */
scroll,
scroll;
position: relative;
background-repeat: no-repeat;
background-color: white;
background-position:
/* Shadow cover */
0 0,
/* Shadow */
left 0 bottom -0.5rem,
left -0.5rem;
background-size:
/* Shadow cover */
100% 100%,
/* Shadow */
100% 1rem,
100% 1rem;
li {
display: block;
border: 1px dashed darken(grey,20%);
border-radius: 4px;
padding: 0.5rem 1rem;
margin-bottom: 0.4rem;
}
}