CODEWITHSUNDEEP
css
mavili
mavili

Reputation: 3424

position: sticky issue - element appears off-placed

the sticky positioning support in CSS is very nice, but with glitches! I am using position: sticky on a two-column layout. I have a select dropdown in the section that is set to be sticky, when page is scrolled, the select in the sticky-positioned div renders way off its place, outside the div, where it would've appeared originally without any scrolling. Here is the screenshot: enter image description here

when I click anywhere to close the dropdown, and then open it again, it renders fine in the correct place. This is happening on Chrome and Firefox but not in Safari.

Here's a jsfiddle with the issue replicated. Before opening the dropdown, scroll down a bit, and then click on the select.

Does anyone know a solution to this?

Upvotes: 0

Views: 192

Answers (1)

jhpratt
jhpratt

Reputation: 7120

After looking at your example, this appears to be an artifact of the OS rendering <select> elements and not the browser. I'd suggest filing a bug report for Chrome and Firefox, as those are the browsers you reported it in (I've confirmed it in Chrome 59 on Debian-based Linux).

Upvotes: 3

Related Questions