Sticky Header goes to right while transition

[smshahrukh]

I am trying to animate slide down the wrapper in which react-sticky header is used. The code is here:

<div class="wrapper is-slide-down">
  <Sticky style={{ zIndex: 12 }}>
    <div className="row sticky-header">
      <input onChange={onChangeTitle} autoFocus value={title} />
      <CancelIcon />
    </div>
  </Sticky>
</div>

The developer console shows that Sticky header has some weird left position which fixes itself after a while. How can I solve this issue?

[vcarl]

I'm not sure I'm understanding what's happening, could you add a screenshot of video capture of the behavior you're seeing?

[smshahrukh]

Here it is. The input box is wrapped into Sticky header. It moves to the right when transform is applied. https://cl.ly/0G0q390i1m2n

[vcarl]

Looks to me like it's jumping to the left? I think I've run into this problem myself, try wrapping the the StickyContainer with a div and positioning that. When the Sticky gets stuck, it gets a width set equal to the measured value of the container, which can cause what you're seeing.

[siakaramalegos]

I had this same problem. When it stuck, both the sticky header and the scrollable content shifted to the right by a few pixels.

For the header, I think it had something to do with you setting the width. I needed it to be 100% because I have some absolutely positioned elements inside of the header. I also need to set both top AND left. I think those items might have also been causing the shift because when I changed them, it started working fine.

[vcarl]

Is this with the latest version of the library? I can't really provide support for anything < 6, I only recently began maintaining this and don't really have the bandwidth to learn all the previous versions.

[siakaramalegos]

For me, yes. But like I said, I think it might have been because other elements had different positioning, and I needed the header to change to 100% width.

[vcarl]

Yeah there are some quirks with the styling, a little bit more brittle than i'd like. I've had issues with the width as you say as well.

@smshahrukh did wrapping it work? I'm going to close this out in a few days, just don't want open issues lingering.

[smshahrukh]

@vcarl No, Wrapping did not work. I tested it with wrapping but it didn't work. Some left:330px are still added and position: fixed on the Sticky in the case.

[yourmediafriend]

I commented on a previous issue which was similar. I believe the error comes from the css transform changing the relative coordinates of the fixed element (http://maneeshchiba.com/article/css-transforms-fixed-positioning)

I did a quick hack to Sticky.js to calculate the left position using this.placeholder.getClientRects() rather than this.placeholder.getBoundingClientRect()