Repository navigation
p161：第 34 滚动提示，关于 background-attachment 代码问题 #85
Description
测试环境： macOS 11.13.3, Chrome 64
p161，关于滚动提示的 css 代码，理想效果如下：
下面是我的实现完整代码，和书中一致：
<div class="app34">
<p>app34 滚动提示</p>
<div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</div>
<style>
.app34 .list {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid silver;
background: linear-gradient(red, red), /* 方便看效果，white 改为 red */
radial-gradient(at top, rgba(0, 0, 0, .8), transparent 70%);
background-repeat: no-repeat;
background-size: 100% 15px;
background-attachment: local, scroll;
}
</style>
</div>上面的代码，两层背景一起滚动，background-attachment: local, scroll; 未生效，好像 attachment 只接受一个单一值，不能用逗号分隔多个参数？
谢谢。
Activity
GaliMu commentedon Apr 12, 2018
@zphhhhh @cssmagic 我遇到了这个问题，我的环境是 macbook2017，macOs10.13.4， chrome65。我外接了一个 1080p 的dell显示屏，外接显示屏是可以实现效果，自带的屏幕上不行。自带的屏幕上
background-attachment只使用最后一个值，但为啥换个显示器就好使了就不得而知了。我测试了一下修改分辨了没有影响。两个桌面之间切换也没用，该好使的还好使。
而且这个问题只在chrome中发现了，火狐59， safari 11.1 测试没问题
外接屏效果
mac 屏效：
wangdanting commentedon Oct 4, 2018
我也遇到了这个问题，请问该怎么解决！
cssmagic commentedon May 20, 2020
可以认为是浏览器 bug。楼上的几位兄弟可以验证一下目前最新的 Chrome 还有没有这个问题。
wangdanting commentedon May 20, 2020
两年了～突然收到回复，还是挺感动的!
cssmagic commentedon May 21, 2020
我测试了一下，MacBook Pro + Chrome v68 + ( 自带显示屏 vs 外接显示器 )，没有发现任何异常。
判定为当时 Chrome 版本在高分屏下的
background-attachment属性有 bug，后来的版本已修复。此帖就关闭了哈。