CODEWITHSUNDEEP
htmlcssinternet-explorerbackground-positionbackground-attachment
yesman82
yesman82

Reputation: 451

CSS background-attachment local and position bottom problem with Edge/IE

I'm trying to show a gradient at the end of a scrolling content by using a linear gradient with background-position: bottom and background-attachment: local. This works great in all browsers except IE and Edge. I could just accept it as is if it wouldn't say everywhere that this feature is fully developed.

I just can't find any solution. It is supposed to work like that but it obviously doesn't. I am missing something but I don't know what.

It is important that the content stays vertically centered when smaller than parent and scroll gradient works in any case (large/small content and any scroll position).

.scrollContent {
    display: flex;
    width: 200px;
    height: 200px;
    overflow-y: auto;

    background-image: linear-gradient(transparent, white 80%), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0));
    background-position: bottom;
    background-size: 100% 40px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

.vcenter {
    flex-grow: 1;
    margin: auto;
}
<div class="scrollContent">
    <div class="vcenter">
        Scroll first <br>Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br>Scroll <br>Scroll last
    </div>
</div>

margin: auto vertically centers flex item better than align-items: center in a scroll environment

This code should show a box with an overflowing content which shows a gradient only when you scroll to the end of the content. In IE/Edge the gradient is already show page load in the middle of the content. And when scrolling it scrolls with the content. Very ugly and definitely not intended.

Here is also some a codepen to play around with.

https://codepen.io/yesman82/pen/KJbrLo

Upvotes: 1

Views: 198

Answers (0)

Related Questions