p161：第 34 滚动提示，关于 background-attachment 代码问题

[zphhhhh]

测试环境： 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 只接受一个单一值，不能用逗号分隔多个参数？
谢谢。

[GaliMu]

@zphhhhh @cssmagic 我遇到了这个问题，我的环境是 macbook2017，macOs10.13.4， chrome65。我外接了一个 1080p 的dell显示屏，外接显示屏是可以实现效果，自带的屏幕上不行。自带的屏幕上 background-attachment 只使用最后一个值，但为啥换个显示器就好使了就不得而知了。
我测试了一下修改分辨了没有影响。两个桌面之间切换也没用，该好使的还好使。
而且这个问题只在chrome中发现了，火狐59， safari 11.1 测试没问题

外接屏效果

mac 屏效：

[wangdanting]

我也遇到了这个问题，请问该怎么解决！

[cssmagic]

外接显示屏是可以实现效果，自带的屏幕上不行

可以认为是浏览器 bug。楼上的几位兄弟可以验证一下目前最新的 Chrome 还有没有这个问题。

[wangdanting]

外接显示屏是可以实现效果，自带的屏幕上不行

可以认为是浏览器 bug。楼上的几位兄弟可以验证一下目前最新的 Chrome 还有没有这个问题。

两年了～突然收到回复，还是挺感动的!

[cssmagic]

我测试了一下，MacBook Pro + Chrome v68 + ( 自带显示屏 vs 外接显示器 )，没有发现任何异常。

判定为当时 Chrome 版本在高分屏下的 background-attachment 属性有 bug，后来的版本已修复。

此帖就关闭了哈。