Why doesn't "position: sticky" work in Safari?

Question

Level 3

592 points

Why doesn't "position: sticky" work in Safari?

There's a CSS property called position: sticky that makes things stick to the top of the browser window (like a navbar) while scrolling. Using the Developer tools, it shows that "position: sticky" is invalid in Safari. This works fine in Chrome and Firefox, but for some reason not in Safari.

I have Safari 12.1.1 running on macOS Mojave 10.14.5.

I've also tried position: webkit-sticky but Safari also thinks that is an invalid CSS property.

iMac 27", macOS 10.14

Posted on Jun 21, 2019 11:43 AM

Reply

Answer 1

VikingOSX

Level 10

123,152 points

Jun 21, 2019 3:03 PM in response to TomNYC

Syntactically, I believe you have dropped a leading dash in webkit property spelling:

position: -webkit-sticky;

Reply

Answer 2

TomNYC Author

Level 3

592 points

Jun 21, 2019 12:19 PM in response to VikingOSX

Unfortunately it doesn't clear anything up. I'm using it correctly, but Safari says "sticky" and "webkit-sticky" are unsupported properties.

It's very strange that Safari doesn't support it. The "Can I Use" website states that Safari does support this property with the "webkit" prefix, but as shown above, Safari says both "sticky" and "webkit-sticky" are unsupported.

Reply

Answer 3

VikingOSX

Level 10

123,152 points

Jun 29, 2019 5:38 AM in response to TomNYC

The DEMO on this website shows position: -webkit-sticky; working correctly. I have tested the DEMO in Firefox 67.0.4 and Safari 12.1.1 on macOS Mojave 10.14.5, and it works identically in both browsers. I do not use Chrome.

Reply

Answer 4

VikingOSX

Level 10

123,152 points

Jun 21, 2019 12:02 PM in response to TomNYC

Position: Sticky dissected. Does that article clear up and allow you to effectively apply this CSS3 property?

Reply

Answer 5

TomNYC Author

Level 3

592 points

Jun 28, 2019 3:32 PM in response to VikingOSX

Yes, that was a typo. I added position: -webkit-sticky, and while it doesn't show as being an unsupported property now, it just doesn't work in Safari or Chrome.

Reply

Why doesn't "position: sticky" work in Safari?

Similar questions