search

INN / umbrella-sfpublicpress

San Francisco Public Press
https://sfpublicpress.org/
GNU General Public License v2.0
1 stars 4 forks source link

Sticky nav is not appearing on some devices #162

Closed benlk closed 3 years ago

benlk commented 4 years ago

Reported bug:

bar is erratic - It seems to show on some devices, but not all.

benlk commented 4 years ago

Need more details about which devices and browsers it is not showing up on.

The sticky nav uses the CSS position:sticky feature which isn't available in IE 11. https://caniuse.com/#feat=css-sticky

kaylima commented 4 years ago

@benlk Is there a workaround you recommend for IE 11?

benlk commented 3 years ago

If we can confirm that this is caused by IE and not something else, these are our options, in the order that I recommend them:

  1. "For performance improvements on mobile devices, the sticky navigation uses some modern browser features that are not available in Internet Explorer. Internet Explorer stopped receiving updates with new features in 2016, and Microsoft will gradually stop issuing updates with security fixes. It has already stopped issuing security fixes for IE 11 on Windows 7. If you are still using Internet Explorer 11, Microsoft recommends that you upgrade to Microsoft Edge."
  2. Wrap the sticky-dependent styles in an @supports ( position: sticky; ) {...} so that we aren't applying sticky styles on IE. Do not add sticky support for IE. The main menu will remain staticly positioned in IE and other antiquated browsers.
  3. Add a polyfill, like https://github.com/yowainwright/stickybits.
  4. Gut and redo the navigation JS to re-add the sticky position stuff.

But that's only if it turns out to be caused by IE11. On the affected computer, can they send us the "unique URL" link from https://www.whatismybrowser.com/ ?

benlk commented 3 years ago

https://github.com/INN/umbrella-sfpublicpress/blob/22f1ada39ac1093e1912799b78d3bb3a551efc82/wp-content/themes/sfpublicpress/less/navigation.less#L13-L24

It's not sticking on non-IE desktops because it's not set to stick on non-IE desktops. It's only set to stick on small screens.

@kaylima I'm assuming that this should be changed to make it stick on all screen sizes?