Message list overflow not working on Firefox

[selyon]

I think this is a known bug of Firefox: when you use a flexbox with column-reverse or row-reverse, the overflow doesn't work. In this case the message list will expand outside the container div, because messega bubbles are inside a column-reverse flexbox Here is a screenshot of the demo application With overflow working properly the scrollbar would be inside the bubbles container, not at the edge of the page. Is there a workaround to make it work even on Firefox?

[johniak]

So overflow will be fixed, in next release, but there is a bigger problem. https://bugzilla.mozilla.org/show_bug.cgi?id=1042151 firefox has a bug with scrolling 'flex-direction: collumn-reverse' so scroll is not working :(

[atomicacorn]

Given the issue has been outstanding in the Mozilla community for so long, I don't expect a fix will be rolled out any time soon. @johniak, I've found a way around the scrolling bug in Firefox and IE, by separating out the div containers using the column-reverse. Here is the change I made (please be kind, I'm only a newbie 😄 ):

#WebScrollView.js L19 onwards.

render() {
    const {
      ListHeaderComponent,
      ListFooterComponent,
      data,
      inverted,
    } = this.props;
    let messages = data;
    if (!inverted) {
      messages = data.slice().reverse();
    }
    return (
      <div style={styles.container}>
        <div style={styles.innerContainer}>
          {ListHeaderComponent()}
          {messages.map(this.renderItem)}
          {ListFooterComponent()}
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    height: '100%',
    minHeight: '100%',
    width: '100%',
    overflow: 'auto',
    transform: 'rotateX(180deg)',
  },
  innerContainer: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column-reverse',
    flex: 1,
    alignItems: 'stretch',
    transform: 'rotateX(180deg)',
  },
};

If a PR is appropriate, please let me know and I'll make one.

I had a couple of issues during compiling, which meant my load more button failed to build correctly, but I believe this was my build environment. I also noticed was that the fix had undone the reverse scroll of the chat window- so apologies for the gnarly 360 in the elements, I'm sure there's a cleaner way to do this, and it is unnecessary.

[cle1000]

+1 can we merge this PR ?