Thanks for filing the issue!

Able to reproduce the issue on reported chrome version 64.0.3282.167 and on the latest canary 65.0.3350.0 using Windows 10, Ubuntu 14.04 and Mac 10.13.1. As the issue is seen from M60(60.0.3072.0) considering it as Non-Regression and marking it as Untriaged. 

Majid please triage.

The overlay element in that page has "overflow: visible" (default value). By definition it is not an scroll container [1].

The passage you are referring to in overscroll specification, talks about *scroll containers* that have no potential to scroll. In this case, the element is no a scroll container. You can fix this easily by using "overflow: hidden" or "overflow: auto" whichever is appropriate.


[1] https://drafts.csswg.org/css-overflow-3/#scroll-container

As a follow up to this.

Actually, by making further updates to the CodePen, If I add overflow: hidden or overflow: auto to the .overlay div, it makes no difference, the scroll is still propagated to the content behind. If I increase the content amount so it no longer fits into the element then the overscroll-behavior comes into effect. Surely, by adding overflow: auto or overflow: hidden to the .overlay then it should work?   I just need a way to stop it propagating.

That is correct. I can confirm this as well. 

It seems to be broken for composited scrolling. In particular if I use --disable-threaded-scrolling things appear to work as expected.

If I have to guess, if we don't have a composited scrolling layer for the 
overlay element, cc does not learn about its "overscroll-behavior" which
causes it to ignore it.

Assigning to sunyunjia@ for further investigation and decision on next step.

Hello. Did it resolve? I have the same issue on Chrome 67.

For example, chatbox demo: https://ebidel.github.io/demos/chatbox.html

Let's imagine the situation, when user has just started the chat conversation and left the first message. On the example's page, open DevTools, remove by it all the chat messages except the first message, and try to scroll the chat messages container. The first message height is smaller than the chat messages container height (300px in your example), and scrolling will propogate to body of the page. You can see it on my video: https://youtu.be/5mXAWdmj3jk

But this is not what expected. If I set the "overflow" property to "auto" or "scroll" for container, I'm expecting that the container always at "scrollable" state, despite of it's content height. In this situation, when content height is smaller, the container should be at "scroll boundary" state and, when I set "overscroll-behavior" to "contain", the scrolling shouldn't propogate to body.