Position Sticky not working when take snapshot

[anhdd-kuro]

Bug report

First , I don't know where to report chromatic issue so if I'm sorry if I posted wrong place I have a table with 1 row sticky

.tr-sticky {
  position: sticky;
  bottom: 0;
}

Every working fine on Chrome , Firefox , Safari but when take snapshot position sticky doesn't seem working Please take a look at the last row ( total one )

View on chromatic canvas

Snapshot

Is this browser version problem or something else ? How can I know what version of chrome that chromatic using

[chantastic]

Thanks for reaching out.

If you adjust the viewport (browser window) are you able to replicate the presentation you're seeing in Chromatic?

There are a few things you can do manage the viewport in Chromatic at a story level. However, height is not a configurable option.

Height will default to whatever the view demands.

Can you add a decorator to this story to force a height?

Something like:

import { YourComponent } from './YourComponent';

export default {
  title: 'YourComponent',
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ height: '1080px' }}>
        <Story />
      </div>
    ),
  ],
};

[isc30]

decorator:

const useHeightDecorator: DecoratorFn = (Story, context) => {
  const rootRef = useRef<HTMLDivElement>(null)
  const height = context?.parameters?.height as string | undefined

  // when height is specified, we create a specific scrollable rootRef for the story
  if (height != null) {
    return (
      <div ref={rootRef} style={{ height, overflow: 'auto' }}>
        <Story {...context} args={{ ...context.args, rootRef }} />
      </div>
    )
  }

  // when chromatic takes the screenshot, use the story as the rootRef to avoid accidental IntersectionObserver issues
  if (isChromatic()) {
    return (
      <div ref={rootRef}>
        <Story {...context} args={{ ...context.args, rootRef }} />
      </div>
    )
  }

  // for normal stories, rootRef will be `undefined`, causing it to fallback to `body`
  return <Story {...context} args={{ ...context.args, rootRef }} />
}