The cell editor is misplaced if one of the ancestors of the component is css translated

[enderortak]

Describe the bug The cell editor is misplaced if one of the ancestors of the component is css translated (transform: translate(10px, 10px))

Current behavior The cell editor has a margin of x, y pixels if one of the ancestors have "transform: translate(x px, y px)" css rule.

Expected behavior The cell editor is displayed where it is meant to be without any margins.

Screenshots or gifs

Your environment details

• Device: Desktop
• OS: Windows 10
• Browser: Chrome 100.0.4896.127

[aqibasif]

Hi @enderortak, Did you manage to resolve this issue? because I'm also facing this same issue.

[enderortak]

Hello @aqibasif, Unfortunately I could not resolve the issue :( Still waiting for a workaround suggestion.

[czerwiukk]

Hello, thank you for reporting the issue. We'll investigate this bug as fast as possible.

[alonshmiel]

@enderortak , can you please send a link with an example for that?

[enderortak]

@enderortak , can you please send a link with an example for that?

@alonshmiel Here you go: https://codesandbox.io/embed/serverless-silence-910069?fontsize=14&hidenavigation=1&theme=dark

[DLowHP]

Hi! I investigated the issue and I must unfortunately say this won't be fixed anytime soon because:

Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s transformation matrix. (see: CSS Transform - w3.org)

and furthermore

4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:     i. A transform or perspective value other than none     <...>

(see point 4/i: Layout and the containing block - MDN).

For now, I strongly advise you to try using different CSS methods of positioning. At the same time if you have a specific case where you feel like using CSS transform/translate is the only suitable option feel free to text me - maybe we can solve this problem together from a different angle.

Sorry this took so long, take care!