Misalignment on Internet Explorer

Hey there \o

I'm working with some browsers compatibility. Testing on Chrome, Firefox and Edge, the toolptip is doing well, but on IE (in its twentieth version), i'm having some problems with a unnecessary addition of top in relation to the document, making the Tooltip out of alignment with its parent component.

Chrome example:

IE example:

Currently, the code of the Tooltip looks like that:

import React, { cloneElement } from 'react';
import ResizeObserver from "resize-observer-polyfill";
import { useToggleLayer, anchor, Arrow } from 'react-laag'

 import Container from './styles';

function Tooltip({ content, children }) {

  const [element, toggleLayerProps] = useToggleLayer(
    ({ layerProps, isOpen, arrowStyle, layerSide }) => isOpen && (
      <Container 
      ref={layerProps.ref}
      style={{
        ...layerProps.style,
      }}
      >
        {content}
        <Arrow 
          style={{
            ...arrowStyle,
          }}
          layerSide={layerSide}
          backgroundColor="#FFFFFF"
          borderWidth={1}
          borderColor="#FFFFFF"
          angle={40}
          size={9}
          roundness={0.8}
        />
      </Container>
    ),
    {
      placement: {
        anchor: anchor.RIGHT_CENTER,
        triggerOffset: 10
      },
      closeOnOutsideClick: true,
      ResizeObserver,
    }
  )
  return (
    <>
    {element}
    {cloneElement(children, {onClick: toggleLayerProps.openFromMouseEvent})}
    </>
  )
}

export default Tooltip;

I'm don't have sure if my approach is the best way of abstraction and reuse with the lib, if that is wrong, i'd like to know the best pratice. I'm just want to figure out why i'm having this browsers mismatch 😅

everweij / react-laag