CSS position 僅在 Chrome 上修復了剪貼路徑或圖像掩碼的問題

Question

我正在嘗試實現類似於固定背景附件的效果。 我可以使用clip-path或-webkit-mask-image獲得我想要的結果，但是在 Chrome 上，有時固定圖像會在它離開視圖並且我向后滾動時隱藏，直到我 select一些東西或改變瀏覽器的寬度。 我已經在 Firefox 和 Edge 上對此進行了測試，它們都還可以。

我想知道是什么問題，有沒有辦法解決這個問題。

gif 問題

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Issue</title>
        <style>
            .parent {
                position: relative;
                width: 500px;
                height: 200px;
                background: lightcoral;
                clip-path: inset(0);
                box-sizing: border-box;
            }

            .child {
                position: fixed;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: url("https://picsum.photos/800/400");
            }

            .filler {
                width: 100%;
                min-height: 2000px;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <span class="child"></span>
        </div>
        <div class="filler"></div>
    </body>
</html>

Answer 1

幾個月前，我經歷了一個痛苦的嘗試讓clip:rect工作的過程，遇到的問題與您遇到的問題相同（我知道您沒有使用clip:rect ）。 根本問題是，在重新加載頁面時，如果clip:rect區域當前不在視圖中，則不會呈現其中的內容。

調整屏幕大小或在開發人員面板中關閉並重新打開樣式會正確重新渲染我的圖像，但這不是解決方案，只是問題的證據。

對我來說，使用clip:rect的解決方案是在clip:rect元素中的內容上使用position樣式。 我最初使用的是relative定位，但它需要是fixed的或absolute的。

請檢查您使用的定位，看看這是否有幫助。

另外一點——也是非常令人沮喪的一點——我當時測試的瀏覽器是 Chrome、移動和桌面。 一旦我完成了開發並對其進行了徹底的測試，我就讓它工作得很好。 今天，具有諷刺意味的是，唯一不支持我的clip:rect內容的瀏覽器是桌面 Chrome！

這一定是桌面 Chrome 的最新更新......回到繪圖板。

希望您能從中獲得一些快樂。

Answer 2

我發現了這個問題。 這是我剛剛用我自己的代碼發現的東西。 我們倆的情況非常相似，但為了清楚起見，我將僅針對您的情況進行解釋。

除了在子元素上使用position: fixed ，您還需要應用background-attachment: fixed 。 這兩個 styles 都是必需的。

你應該對 go 很好，因為我已經測試了你的例子。

快樂編碼！

Answer 3

看看這個鏈接Css Backgorund-attachment 屬性

CSS position 僅在 Chrome 上修復了剪貼路徑或圖像掩碼的問題

問題描述

2 個解決方案

解決方案1
0 2021-11-20 17:24:13

解決方案2
0 2021-11-25 07:34:03

解決方案3
-1 2021-11-19 11:20:08

CSS position 僅在 Chrome 上修復了剪貼路徑或圖像掩碼的問題

問題描述

2 個解決方案

解決方案1 0 2021-11-20 17:24:13

解決方案2 0 2021-11-25 07:34:03

解決方案3 -1 2021-11-19 11:20:08

解決方案1
0 2021-11-20 17:24:13

解決方案2
0 2021-11-25 07:34:03

解決方案3
-1 2021-11-19 11:20:08