Menu
I'm trying to use the css style, position: sticky. It works great except for when the select element becomes active. The page scrolls back to the position of the sticky element.
<div style="position: sticky; position: -webkit-sticky; top: 0;">
<select>
<option>Option</option>
</select>
</div>
https://codepen.io/anon/pen/vrxVoy
I couldn't find anything online that addressed this. Has anyone ran into this before and have a solution?
Thanks!
Browser: Chrome 67.0.3396.79
OS: Windows 7 Home Premium.
Sticky works as expected in Firefox.
Bug report found: https://bugs.chromium.org/p/chromium/issues/detail?id=805800#c9
795
Sticky Element Has Parent(s) with overflow PropertyIf the sticky element has a parent or ancestor with overflow: hidden , overflow: auto , or overflow: scroll , then position: sticky will not work properly.
Setting position sticky Position sticky alternates the position of an element between relative and fixed based on the viewer's scroll position. A sticky element is relative to the document flow until a defined scroll position is reached, then it switches to behaving like a fixed element within its direct parent.
Position Sticky is supported by all major modern browsers, except for old IE. For Safari browsers you will need to add the -webkit prefix.
The problem is because it is applied to a form element. When you click on the element, the browser is programmed to go to the location of it if it's base location is off-screen. Firefox is programmed differently and only does this if the element itself is off-screen.
To fix it, try using position:fixed; instead. Since there isn't anything above the element there's no reason to use sticky.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
