window.getComputedStyle(this.target) wouldn't get correct width in iOS Safari sometimes

[ke1vin4real]

OS: iOS 12.3.1
Broswer: Safari
Library: "preact": "8.2.9", "react-lines-ellipsis": "0.14.1"
Code snippet：

componentDidMount() {
    window.setTimeout(() => {
      this.setState({ isMounted: true });
    }, 0)
}

...

render() {
    return (
      ...
      {isMounted && <LinesEllipsis {...props} />}
      ...
    );
}

The component wouldn't initialize properly sometimes.
In Android and PC broswer it works well.

Generally, window.getComputedStyle(this.target)would get an Object with property width width a certain value like 100px. But sometimes Safari would get a auto value of width in getComputedStyle(this.target), that led to no wrap in canvas and calcIndexes() got the wrong result of [0]. Not always, there's a chance that that would happen.

Could I get react-lines-ellipsis via cdn? I would provide a demo.

[ke1vin4real]

I have tried .LinesEllipsis { width: 690px !important; } and set width in a inline style of parent Node.
It doesn't work

[ke1vin4real]

Oh, when I set a width in inlined style to parent node and use this.target.getBoundingClientRect().width in copyStyleToCanvas(), it will always get a certain correct width.
I believe there are some mechanisms in getComputedStyle when the component mounted.

[xiaody]

Close due to inactivity.