@idesigncode Thanks for a great bug report! I have done some work on the zoom feature in the past and I might be able to help.

Going through your examples I can't really see an obvious solution to the problem but I'm going to fire up my development environment over the weekend and see what I can figure out.

@idesigncode Are you interested in figuring out a solution for this issue too?

Hey @Tomastomaslol, all good, yeah the solution isn't obvious to me either...

For my specific use case I would be happy to disable the zoom feature on the affected stories as long as that also removed the transform style.

Happy to help test and be involved in the discussion but I'm not familiar with the source code.

Is the story rendered graphically in code?

I had a look at this and the behaviour is inconsistent across the 2 browsers.

@idesigncode, Could you please explain your use case? To me, the behaviour in firefox looks more correct than in chrome. I would expect the element you are previewing to be positioned relative to the "story wrapper".

In the attached screenshot I added a green box around what I consider to be the "story wrapper." 🙂

@Tomastomaslol, sure thing:

My use case is documenting a tooltip component that is always visible within the window (if opened). This is achieved by using position: fixed and calculating the appropriate top/left values in relation to the viewport.

The calculated values are based off getBoundingClientRect which essentially is expecting the first document ancestor to be what I would call the "positioning origin".

In Firefox, the first ancestor with the transform style kind of becomes the "positioning origin" and so the calculated vertical and horizontal positioning values are no longer correct.

It may be worth noting that all other browsers I've tested this in behave like Chrome so Firefox does appear to be the odd-one-out in regards to this issue.

How can I contribute to this project? I have moderate knowledge of HTML CSS and Javascript!

@Monk102 https://storybook.js.org/docs/react/contribute/how-to-contribute

can you guys provide me a simple website code ?😣

Hey @idesigncode could you please suggest me , how do I start contributing to this project .I am new to the world of open source contribution. Please help me

Hey @idesigncode could you please suggest me , how do I start contributing to this project .I am new to the world of open source contribution. Please help me

https://storybook.js.org/docs/react/contribute/how-to-contribute

Is this still an active problem?

@Stroudnat Yes, I'm not aware of any recent changes to resolve this.

Thanks @idesigncode just got around to cloning everything and looking at issue repos so Ill check back if I see anything!

@idesigncode in our Design System, to fix this issue with Firefox we used React's createPortal to work this out.

@konsalex sounds interesting... is that in Storybook or the component itself? Can you provide any code examples?

@idesigncode I implemented this in the component it's self. Cannot share code example at the moment, but in a higher level

Before it was a

<ForwardRef>
   <PopoverComponent />
</ForwardRef>

which was breaking with getBoundingClientRect, and the approach of wrapping it with a portal like this,

const Portal = ({ children, container }: PortalProps) => {
  return ReactDOM.createPortal(children, container);
};

solve the issue

Test

I do not expect there is an ideal fix here as the inconsistency lies in the browsers' implementation of the transform style...

But if I may propose an alternative: only apply the transform style if the zoom feature is not disabled.

I believe the zoom feature is the only reason to use the transform style in the first place, so applying it while this feature is disabled seems unnecessary.