Editing a sticky input element in Chrome causes the page to scroll to the top Editing a sticky input element in Chrome causes the page to scroll to the top google-chrome google-chrome

Editing a sticky input element in Chrome causes the page to scroll to the top


html css google-chrome css-position sticky

I have managed to make it work, but it's probably not the best solution.

  1. Add add either overflow: auto or overflow: hidden to the class with position: sticky.
  2. Remove the placeholder from <input>.

I'm not sure why adding overflow or removing the placeholder makes it work, maybe someone can help explain this.

.container {  height: 5000px;}.heading{  background: #ccc;  height: 50px;  line-height: 50px;  margin-top: 10px;  font-size: 30px;  padding-left: 10px;  position: -webkit-sticky;  position: sticky;  top: 0px;  overflow: auto;}
<h1>Lorem Ipsum</h1><div class="container">  <div class="heading">    <input>  </div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>    <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div>  <div>Lorem Ipsum</div></div>
Expand snippet