Search code examples
overflowmix-blend-modeborder-radiuswill-change

CSS overflow, border-radius, mix-blend-mode, will-change : Depending on the width of the screen, the position of the element changes

I need mix-blend-mode element in my project, so I use mix-blend-mode property.

It looked fine at first, but as the screen narrowed, it changed to an unexpected appearance.

Also overflow: hidden doesn't work, so blue comes out of the corner.

I run this code in Chrome browser.

Looks different depending on screen width

.card{
    position: relative;
    width: 300px;
    height: 50vh;
    background-color: pink;
    margin: auto;
    overflow: hidden;
    border-radius: 24px;
}
.blend{
    width: 100%;
    height: 100%;
    background-color: blue;
    mix-blend-mode: color-dodge;
    will-change: transform;
}

<div class="card">
    <div class="blend"></div>
</div>

Here's my code. Please let me know why this problem happen. Thank you!

I think border-radius, overflow, mix-blend-mode and will-change properties seems to be contributing to this problem, but still I don't know ★why★ this happens.

Solution

  • It's not super clear what you are hoping for, but if you're expecting the inner div to match the dimensions of the outer div then remove will-change: transform. With the 100% width and height it should already adhere to the parent div.

    For reference: https://jsfiddle.net/santmzyq/4/

    Hope this helps.