dollarshaveclub/stickybits

stickybits element width in IE

aitboudad opened this issue · 13 comments

aitboudad commented

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

Thanks!

yowainwright commented

@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 🙏

yowainwright commented

@aitboudad I will look as soon as possible. 🙏

yowainwright commented

@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 commented

@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.

  • 👍1
yowainwright commented

@cyr-x awesome!

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

aitboudad commented

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.

  • 👍1
yowainwright commented

@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 commented

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 commented

@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 commented

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!

  • 👍1
x35a commented

Hi all! For IE when sticky element is position: fixed i used

width: 100%
max-width: ...px

Looks like workaround however anybody knows better solution?

kavi87 commented

Hi, I understand that stickybits does not want to be a polyfill but it is also a library that should abstract the user from dealing with these issues. Sensible defaults for CSS classes or at least some snipet of js for the 99% of use case (stick at top / bottom) would have been great. I was just expecting to put the library and have things work but I'm pretty much in the same position than using position: sticky, it works in chrome not in IE. If I have to define JS and CSS myself, why even use an external library ?

EDIT: I'm sorry, I was just frustrated with IE. The CSS fix actually works. Thanks for your work.

  • 👍1