Animation is not smooth on Safari

[kevinleeTCA]

Problem or feature description

I got a list of columns to render, and hooked up react-move to do animation when a column is deleted. Only animating the width, marginLeft and marginRight of the column, then when one column is deleted, the other will slide from right to left.

It is very smooth on chrome and firefox, but not on safari, you can see the sluggish movements.

Steps to reproduce (only needed for problems)

const Columns = ({ columnIds }: propsType) => {
...
  const _onStart = (item, index) => ({
    width: 200,
    marginLeft: 16,
    marginRight: 16
  });

  const _onLeave = (item, index) => [
    {
      width: [0],
      timing: { duration: 300 }
    },
    {
      marginLeft: [0],
      marginRight: [0],
      timing: { duration: 200 }
    }
  ];
    <NodeGroup
      data={columnIds}
      keyAccessor={id => id}
      start={_onStart}
      leave={_onLeave}
    >
      {nodes => (
        <div style={{flex:1, display: "flex"}}>
          {nodes.map(({ key, data, state }) => (
            <div key={key} style={{ display: "flex", ...state }}>
              <Column key={key} id={key} />
            </div>
          ))}
        </div>
      )}
    </NodeGroup>
...
}

And the Column is just like a box with fixed width, height.

const Column = () => {
   return <div style={{width:200, height:500, backgroundColor: "red"}} />
}

Versions (only needed for problems)

• React-Move: ^2.0.0
• React: ^15.6.1
• Browser: Version 10.0 (12602.1.50.0.10) (Safari only)

[sghall]

Hey there.

Is it actually dropping frames if you profile it in Safari? Be helpful to see a profile of the animation.

Because you're not animating lots of elements (if I understand correctly) and it's just a few props it likely not a animation performance issue. There's some layout/recalc differences in Safari that can cause problems and be difficult to track down without looking at all the styles on the page. Wondering if you can put an example together on codesandbox that reproduces the issue.

I think the above is pseudo code for demonstration, but just to be sure...all the style objects that are constant should be defined outside so they don't get created on each render. It creates a lot of extra objects. So like {flex:1, display: "flex"} in the nodes function and {width:200, height:500, backgroundColor: "red"} in the Column component.

Also, are you looking at it in a production build of react?

[kevinleeTCA]

@sghall Thank you very much for the immediate feedback, We found the reason, it is actually our problem, since we add webkitTransform: "translate3d(0, 0, 0)" to all elements in our index.css, which is used for fix sticky header issue. This will actually interrupt animation.

We move webkitTransform: "translate3d(0, 0, 0) to the places of the sticky header container, and then the problem solved, thank you very much for ur constructive reply, cheers.

[sghall]

That's great. Glad you found the issue! Cheers.