@@ -32,40 +32,44 @@ export default function fixAuto(props, updateState) {
3232 style = { { ...elementStyles , position : 'absolute' , visibility : 'hidden' } }
3333 ref = { ref => {
3434 if ( ref ) {
35- // Once it's rendered out, fetch bounds (minus padding/margin/borders)
36- let node = ReactDOM . findDOMNode ( ref )
37- let width , height
38- let cs = getComputedStyle ( node )
39- if ( cs . boxSizing === 'border-box' ) {
40- width = node . clientWidth
41- height = node . clientHeight
42- } else {
43- const paddingX =
44- parseFloat ( cs . paddingLeft || 0 ) + parseFloat ( cs . paddingRight || 0 )
45- const paddingY =
46- parseFloat ( cs . paddingTop || 0 ) + parseFloat ( cs . paddingBottom || 0 )
47- const borderX =
48- parseFloat ( cs . borderLeftWidth || 0 ) +
49- parseFloat ( cs . borderRightWidth || 0 )
50- const borderY =
51- parseFloat ( cs . borderTopWidth || 0 ) +
52- parseFloat ( cs . borderBottomWidth || 0 )
53- width = node . offsetWidth - paddingX - borderX
54- height = node . offsetHeight - paddingY - borderY
55- }
35+ requestAnimationFrame ( ( ) => {
36+ // Once it's rendered out, fetch bounds (minus padding/margin/borders)
37+ let node = ReactDOM . findDOMNode ( ref )
38+ let width , height
39+ let cs = getComputedStyle ( node )
40+ if ( cs . boxSizing === 'border-box' ) {
41+ width = node . offsetWidth
42+ height = node . offsetHeight
43+ } else {
44+ const paddingX =
45+ parseFloat ( cs . paddingLeft || 0 ) +
46+ parseFloat ( cs . paddingRight || 0 )
47+ const paddingY =
48+ parseFloat ( cs . paddingTop || 0 ) +
49+ parseFloat ( cs . paddingBottom || 0 )
50+ const borderX =
51+ parseFloat ( cs . borderLeftWidth || 0 ) +
52+ parseFloat ( cs . borderRightWidth || 0 )
53+ const borderY =
54+ parseFloat ( cs . borderTopWidth || 0 ) +
55+ parseFloat ( cs . borderBottomWidth || 0 )
56+ width = node . offsetWidth - paddingX - borderX
57+ height = node . offsetHeight - paddingY - borderY
58+ }
5659
57- // Defer to next frame, or else the springs updateToken is canceled
58- const convert = overwrite ( width , height )
59- updateState (
60- {
61- override : {
62- ...props ,
63- from : Object . entries ( from ) . reduce ( convert , from ) ,
64- to : Object . entries ( to ) . reduce ( convert , to ) ,
60+ // Defer to next frame, or else the springs updateToken is canceled
61+ const convert = overwrite ( width , height )
62+ updateState (
63+ {
64+ override : {
65+ ...props ,
66+ from : Object . entries ( from ) . reduce ( convert , from ) ,
67+ to : Object . entries ( to ) . reduce ( convert , to ) ,
68+ } ,
6569 } ,
66- } ,
67- false
68- )
70+ false
71+ )
72+ } )
6973 }
7074 } }
7175 />
0 commit comments