Radium: Fallback values not working for transform

Created on 18 Dec 2016  路  2Comments  路  Source: FormidableLabs/radium

I have the following code:

    return this.props.tracks.map((track, i) => {
      let activeStyle = {
        transition: 'opacity 2s ease-in-out, transform 2s ease-in-out',
        // transitionDelay: `${i * 250}ms`,
      };
      if (playing && track._id !== activeTrackId) {
        activeStyle.opacity = 0.4;
        activeStyle.transform = [
          'scale3d(0.95, 1, 1)',
          'scale(0.95)',
        ];
      }

      return <div
        key={track._id}
        style={[styles.track, activeStyle]}
        onClick={() => this.props.onClickTrack(track._id)}
      >
        <div style={{ flex: 1 }}>{track.name}</div>
        <div>{track.duration.toRunTime()}</div>
      </div>
    });

The scale3d/scale transform simply doesn't work. Is this not supported or am I doing something wrong here?

Most helpful comment

Fallbacks seem to be broken entirely in most versions of React 15, and all versions of React 16.

Current test case:

styles = {
  display: ['-ms-grid', 'grid']
}

The display css attribute isn't added to the component at all.

All 2 comments

Fallbacks seem to be broken entirely in most versions of React 15, and all versions of React 16.

Current test case:

styles = {
  display: ['-ms-grid', 'grid']
}

The display css attribute isn't added to the component at all.

same problem here, using react V16

Was this page helpful?
0 / 5 - 0 ratings