onLayout width&height rounded numbers

[burakgormek]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

onLayout returns rounded numbers for width and height.

offsetWidth, offsetHeight are the reason why it is returns rounded number.
Note: This property will round the value to an integer.
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)

Might be one solution to fix this is using this approach to calculate width without include transform
https://stackoverflow.com/a/35543016

also worth to mention that React Native doesn't round the numbers for width&height.

Expected behavior

value without rounded

Steps to reproduce

Open codesandbox link:
1: Look console to see View's rounded width.

Test case

https://codesandbox.io/s/vigorous-glitter-u2pddb

Additional comments

No response

[necolas]

Closing this as all the number will be rounded now, as part of fixing significant differences in values. There's no way to get sub pixel values with the web APIs necessary to fix other issues.

[Jackman3005]

Hi @necolas we are having an issue where we measure a component and use the resulting pageX and pageY to position another absolute positioned element. On Web things are either spot on or we are getting slight mis-alignments between the components depending on the screen width of the browser.

When I open the inspect element and try adjusting the left: ... value up or down by one, these do not align with the original component. Only if I adjust it by a decimal amount (e.g. 0.5) can I get it to show perfectly aligned. This problem does not occur on native and I suspect it is because I see the values are coming through in decimal format.

It appears that web browsers to allow fractional pixel values as I was able to find a number of components with calculated dimensions that had fractional values.

I've looked around and I don't know what options I have left to get this to align correctly. I'm guessing that if I had access to the raw numbers I could get the result I'm looking for.

Any thoughts or suggestions?

[Jackman3005]

For those that are running into this as well. I was able to develop a workaround by making use of react-native-reanimated's measure API. The values returned are not rounded which means I get perfect alignment now.

In my situation, this is a step in the right direction anyways as reanimated allows me to make measurements on the UI thread, store the result in a shared value and then pass that down to the child component which can use useAnimatedStyle(..) using the shared value which keeps everything operating on the UI thread helping to eliminate stutter/jitter effects.