Safari IntersectionObserver API issue with CSS transform property

I use Intersection Observer API to know if HTML element is in viewport at the moment.

I noticed strange behavior of the API in the Safari browser when the observed element has the transform CSS property.

Example #1: link. The observable element has CSS property: "transform: translateY(0.99px)". This element is in viewport. The element has green background if it is inside viewport, and red background if it is outside viewport. In desktop Safari in Responsive design mode and in Safari in IOS IntersectionObserver thinks that the observable element is outside the viewport (background is red). This only happens with some values, for example 0.99 (with 0.98 and 0.99 everything is ok). In other browsers the background will be green.

The error is reproduced on the following devices:

• desktop safari: 17.0 (18616.1.27.111.22, 18616)
• IOS simulator Iphone 15 Pro max IOS 17.0. Safari browser

Example #2: link. The observable element has CSS properties: "transform: translateY(92px)" and "transition: .3s ease transform". If you click "GO!" button then the "transform" property will change to "translateY(0)" and the observable element will move to the top (with smooth animation because of "transition" CSS property). In Safari in IOS while the observable element moving the background will change to red. In other browsers the background will always be green.

The error is reproduced on the following devices:

• IOS simulator Iphone 15 Pro max IOS 17.0. Safari browser