Mouse scrolling freezes chrome tab

Question

I have been working on a unique bug and created a fiddle to replicate this.

When the middle mouse button is clicked over the div element with the text in it there is no way to recover from it since the pointer gets stuck. I was wondering if this is a browser bug?

Could there be other ways to implement this scenario with the scrollable div and different css rules?

FIDDLE: https://jsfiddle.net/cs84mobe/9/

html

<div class="one">
    <div class="two">
        <div class="three">
           lots of content .....       
        </div>
    </div>
</div>

CSS

div {
    border: 1px solid black;
    padding: 10px
}

.three {
    height: 100px;
    overflow: auto;
}

I checked other stackoverflow questions that was related to it but non of them helped.

Answer 1

Looks like a reported bug:

Issue 444766: Lose all ability to left/middle click after middle-button scrolling in certain websites.

Steps to reproduce the problem:

1. Open google+, hangouts.
2. Click on existing conversation (make sure there's a scroll bar available in conversation & main scroll bar grayed out).
3. Middle mouse button click-scroll inside

What is the expected behavior?

scrolling of content

What went wrong?

Current tab is no longer responsive to ANY mouse clicks. Hover still works, page isn't frozen, just no way to click anything using any of the mouse buttons.

However, you may have found a better way to reproduce the issue.