Tengo un problema extraño con el cuadro delimitador. Como puede ver en la captura de pantalla, la posición del cuadro delimitador de ad_agency es de 1 a 2 píxeles a la derecha de la posición del elemento real. No tengo márgenes impares, rellenos, etc., todos son regulares. Una pequeña franja (4 px de altura) debajo del token/chip de la agencia de anuncios se coloca desde .getBoundingClientRect() y su ancho es igual al ancho del token. Parece que el ancho visual de las fichas es menor que el ancho del cuadro delimitador y mueve todos los elementos anteriores fuera del cuadro delimitador (de alguna manera). Si configuro el ancho constante (por ejemplo, ancho: 150 px;), el problema desaparece, pero cualquier otra opción para el ancho genera este error.

Yo uso mecanografiado, mobx, react, css.

 const Container = styled(CFlex)<{color: string}>` height: 28px; background-color: ${props => props.color}; border-radius: 2px; display: inline-flex; color: white; margin-right: 12px; align-items: center; position: relative; z-index: 20; &:hover { z-index: 23; }`

no sé si importa, uso clon de reacción para insertar token y agregarle eventos de mouse:

 {React.cloneElement(this.props.children, { onMouseLeave: this.referenceMouseHandler, onMouseEnter: (event) => this.referenceMouseHandler(event, true), })}

donde this.props.children = token

¿Alguien sabe cómo solucionar este problema?

Versión mínima donde ocurre el problema (parece que el posicionamiento del contenido es incorrecto): ingrese la descripción de la imagen aquí