CSS position fixed problem with clippath or image mask only on Chrome-CodePudding

I'm trying to achieve an effect similar to background attachment fixed. I can get the result I want with clip-path or -webkit-mask-image, however on Chrome sometimes the fixed image gets hide when its out of the view and when I'm scrolling back, it does not show up until I select something or change the browser width. I have tested this on Firefox and Edge and they were both okay.

I want to know what is the issue and is there way to fix that.

gif issue

<!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>

CodePudding user response：

I went through a painful process of trying to get clip:rect working a few months ago, with the same issue as you're experiencing (I understand you're not using clip:rect). The underlying issue was that, when reloading the page, if the clip:rect area was not currently within view, the contents within it would not be rendered.

Resizing my screen or turning a style off and back on in the developer panel would re-render my images correctly but was not a solution, just evidence of the issue.

The solution, for me, with clip:rect, was in the use of the position style on the contents within the clip:rect element. I was initially using relative positioning but it needed to be fixed or absolute.

Please check what positioning you're using and see if this helps.

On an additional note - and very frustrating one too - the browser which I tested this on at the time was Chrome, mobile and desktop. I had it working very well once I'd completed development and tested it thoroughly. Today, ironically, the only browser which is not working with my clip:rect content is desktop Chrome!

This must have been a recent update to desktop Chrome... back to the drawing board.

Hopefully, you will have some joy with yours.

CodePudding user response：

I have discovered the issue. It's something that I've just uncovered with my own code. What we both have is very similar but, for clarity, I will explain for your situation only.

As well as using position: fixed on your child element, you also need to apply background-attachment: fixed. Both these styles are required.

You should be good to go, as I've tested your example.

Happy coding!