1

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

yesman82
  • 431
  • 1
  • 3
  • 12
  • I try to make a test your code example with IE and MS Edge and I am able to produce the issue. I try to find any solution for this but did not get any workable solution. I will try to provide feedback about this issue to MS Edge developers. Thanks for your understanding. – Deepak-MSFT Feb 19 '19 at 07:00

0 Answers0