position: sticky in Chrome vs Safari
There is seemingly no need for the use of position:sticky in this case. The red input bar never needs to be scrolled in your example. Sticky helps provide a state change when an element is positioned at the top of the page. This element is fixed to a certain position from start to finish, so you can just use fixed position (or even absolute), here
*,*:before,*:after { -webkit-box-sizing: border-box; box-sizing: border-box;}body { margin: 0; font-size: 14px; line-height: 18px; position: relative;}header { height: 20px; background: yellow; width: 100%; position: fixed; top: 0; left: 0; z-index: 10;}.el { background: grey; position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; overflow-y: scroll; max-height: 100vh;}.content { background: lightblue;}.content span { display: block; padding: 250px 0;}.sticky { background: red; width: 100%; position: fixed; top: 20px;}Check out Apple's use of position:sticky here => https://www.apple.com/do-more/