{"action":"created","issue":{"url":"https://api.github.com/repos/seatgeek/react-infinite/issues/166","repository_url":"https://api.github.com/repos/seatgeek/react-infinite","labels_url":"https://api.github.com/repos/seatgeek/react-infinite/issues/166/labels{/name}","comments_url":"https://api.github.com/repos/seatgeek/react-infinite/issues/166/comments","events_url":"https://api.github.com/repos/seatgeek/react-infinite/issues/166/events","html_url":"https://github.com/seatgeek/react-infinite/issues/166","id":156890620,"number":166,"title":"List flickers","user":{"login":"jamesfzhang","id":2057670,"avatar_url":"https://avatars.githubusercontent.com/u/2057670?v=3","gravatar_id":"","url":"https://api.github.com/users/jamesfzhang","html_url":"https://github.com/jamesfzhang","followers_url":"https://api.github.com/users/jamesfzhang/followers","following_url":"https://api.github.com/users/jamesfzhang/following{/other_user}","gists_url":"https://api.github.com/users/jamesfzhang/gists{/gist_id}","starred_url":"https://api.github.com/users/jamesfzhang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jamesfzhang/subscriptions","organizations_url":"https://api.github.com/users/jamesfzhang/orgs","repos_url":"https://api.github.com/users/jamesfzhang/repos","events_url":"https://api.github.com/users/jamesfzhang/events{/privacy}","received_events_url":"https://api.github.com/users/jamesfzhang/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-05-26T02:29:14Z","updated_at":"2016-06-18T08:37:05Z","closed_at":null,"body":"This only happens occasionally. So far I've been able to reproduce it on Chrome 50. This happens in the \"Hot right now\" section of https://theartistunion.com.\r\n\r\nThat section is implemented with this `List`.\r\n\r\n```jsx\r\n<List\r\n  fetching={false}\r\n  canFetch={false}\r\n  itemHeight={93}\r\n  title={this.renderTitle()}\r\n  items={this.state.trendingTracks}\r\n  renderItem={this.renderItem}/>\r\n```\r\n\r\nWhich is a component I wrote that wraps around `Infinite`.\r\n\r\n```jsx\r\nrender: function() {\r\n  return (\r\n    <article>\r\n      {this.renderTitle()}\r\n      <Infinite\r\n        infiniteLoadBeginEdgeOffset={60}\r\n        useWindowAsScrollContainer={true}\r\n        elementHeight={this.props.itemHeight}\r\n        isInfiniteLoading={this.props.canFetch && this.props.fetching}\r\n        onInfiniteLoad={_.debounce(this.handleFetch, 2000, true)}\r\n        loadingSpinnerDelegate={this.renderLoading()}>\r\n        {this.renderItems()}\r\n      </Infinite>\r\n    </article>\r\n  );\r\n},\r\n\r\nhandleFetch: function() {\r\n  if (this.props.canFetch && !this.props.fetching && this.props.handleFetch) {\r\n    this.props.handleFetch();\r\n  }\r\n}\r\n```\r\n\r\nThis list of songs is static and does not use the infinite loading feature of this component. Why does it flicker though? Thanks!\r\n\r\n![flicker](https://cloud.githubusercontent.com/assets/2057670/15561764/0a7204bc-22ae-11e6-82d7-1fdc14d67469.gif)"},"comment":{"url":"https://api.github.com/repos/seatgeek/react-infinite/issues/comments/226929688","html_url":"https://github.com/seatgeek/react-infinite/issues/166#issuecomment-226929688","issue_url":"https://api.github.com/repos/seatgeek/react-infinite/issues/166","id":226929688,"user":{"login":"taylorjames","id":10507923,"avatar_url":"https://avatars.githubusercontent.com/u/10507923?v=3","gravatar_id":"","url":"https://api.github.com/users/taylorjames","html_url":"https://github.com/taylorjames","followers_url":"https://api.github.com/users/taylorjames/followers","following_url":"https://api.github.com/users/taylorjames/following{/other_user}","gists_url":"https://api.github.com/users/taylorjames/gists{/gist_id}","starred_url":"https://api.github.com/users/taylorjames/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/taylorjames/subscriptions","organizations_url":"https://api.github.com/users/taylorjames/orgs","repos_url":"https://api.github.com/users/taylorjames/repos","events_url":"https://api.github.com/users/taylorjames/events{/privacy}","received_events_url":"https://api.github.com/users/taylorjames/received_events","type":"User","site_admin":false},"created_at":"2016-06-18T08:37:05Z","updated_at":"2016-06-18T08:37:05Z","body":"Inspecting the list items on your website I see that each element is 100px in height, not 93px as stated in your code above. In order for this component to work properly you need to provide the exact height of each list item. The height lets the absolute scrolling know which elements should be in the viewport, if the height is off,  the scrolling starts to \"jump\" to correct the difference between the actual height and the height prop.\r\n\r\nTry this:\r\n```<List\r\n  fetching={false}\r\n  canFetch={false}\r\n  itemHeight={100}\r\n  title={this.renderTitle()}\r\n  items={this.state.trendingTracks}\r\n  renderItem={this.renderItem}/>```\r\n"}}
{"actor":{"display_login":"taylorjames"}}