stickybits element width in IE

[aitboudad]

Hi
When position: fixed is applied to the sticky element (in IE) it doesn't preserve it's width see bellow:

Thanks!

[yowainwright]

@aitboudad thanks for the demo! Could you provide a quick Codepen example? I think/hope we can add a little css and make it all better 🙏

[aitboudad]

@yowainwright see https://codepen.io/anon/pen/BZgVrz

[yowainwright]

@aitboudad I will look as soon as possible. 🙏

[yowainwright]

@aitboudad https://codepen.io/yowainwright/pen/BZgeWN

max-width: inherit;
width: 100%;

I think that is on the right path ...?

Could you hack at it a bit or close the issue if the fix works? 🙏

[cyr-x]

@yowainwright That's not fixing it (Tested on IE11, Edge 14 & 15).

Only way i've managed it was applying your fix + max-width set on parent.

[yowainwright]

@cyr-x awesome!

Unrelated to @cyr-x's comment—there are probably many ways to solve this issue. Keep 'em coming. 🙌

[aitboudad]

it doesn't solve my issue as in my app I use the grid system (parent doesn't have a specific width).
IMO the better approach is to set the width using js.

[yowainwright]

@aitboudad if you could post your solution here that would be awesome.

I DO think this issue is very valuable for Stickybits to have s people can reference their solutions.

Thanks for sharing!

[aitboudad]

just tested with another alternative lib stickyfill and it appear that handle that issue by setting width to auto and add left + right to the sticky element see https://github.com/wilddeer/stickyfill/blob/master/src/stickyfill.js#L179-L183

[yowainwright]

@aitboudad thanks for sharing. Those styles can be added be added with css:

.js-is-sticky[style="postion: fixed"] {
  left: <left val>;
  top: <top val>;
  bottom: <bottom val>;
  width: <width val>;
}

The benefit of not assuming what an interface needs (aka not position: sticky polyfill 🙂 ) is that styles and javascript can be added to create the desired affect.

If the interface requires the sticky element to be positioned at the bottom or not directly at the top of the browser window (see readme examples) there are a few issues with a full polyfill approach:

1. The plugin file size is larger for a feature that should questionably just default to position: static for non-supported browsers (b/c position: sticky has growing support and a position: static is not broken—users probably wouldn't know or care).
2. Along with the plugin's larger file size, the interface is more locked into 1 approach for sticky elements however often the interface requires sticky elements directly not to be at the top of the browsers. To achieve that desired affect the developer has to write css or javascript to override the plugin defaults which means even more code!

[aitboudad]

make sense and I'm totally agree with all arguments, I'll try to find a better approach to my use-cases.
Anyway thanks for all!