{"action":"created","issue":{"url":"https://api.github.com/repos/necolas/react-native-web/issues/227","repository_url":"https://api.github.com/repos/necolas/react-native-web","labels_url":"https://api.github.com/repos/necolas/react-native-web/issues/227/labels{/name}","comments_url":"https://api.github.com/repos/necolas/react-native-web/issues/227/comments","events_url":"https://api.github.com/repos/necolas/react-native-web/issues/227/events","html_url":"https://github.com/necolas/react-native-web/issues/227","id":183845511,"number":227,"title":"Image: scroll performance issues caused by background-image CSS property","user":{"login":"faceyspacey","id":154732,"avatar_url":"https://avatars.githubusercontent.com/u/154732?v=3","gravatar_id":"","url":"https://api.github.com/users/faceyspacey","html_url":"https://github.com/faceyspacey","followers_url":"https://api.github.com/users/faceyspacey/followers","following_url":"https://api.github.com/users/faceyspacey/following{/other_user}","gists_url":"https://api.github.com/users/faceyspacey/gists{/gist_id}","starred_url":"https://api.github.com/users/faceyspacey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/faceyspacey/subscriptions","organizations_url":"https://api.github.com/users/faceyspacey/orgs","repos_url":"https://api.github.com/users/faceyspacey/repos","events_url":"https://api.github.com/users/faceyspacey/events{/privacy}","received_events_url":"https://api.github.com/users/faceyspacey/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/necolas/react-native-web/labels/bug","name":"bug","color":"D21635"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-10-19T01:45:16Z","updated_at":"2016-10-19T22:06:09Z","closed_at":null,"body":"Because `Image` uses `background-image`, when scrolling lots of images, performance is destroyed. Here's a non-RNW post regarding the issue with this css property in general:\r\n\r\nhttp://stackoverflow.com/questions/33229840/chrome-is-lagging-when-using-css-background-sizecover-in-scrolling-background-i\r\n\r\nThe `translateZ` hardware-acceleration trick mentioned there hardly does anything in this case. And the issue isn't just about `background-size: cover`. I've created my own `<Image>` class and tried every combination. Just having `background-image` is enough to kill performanec for me. I have 50 images on the page. With under 20 images you won't notice it unless you have something to compare to. If you do try the alternative and create your own `<Image>` class which doesn't use background images, you will definitely notice a major different on just those 10 images.  *Now*, for all 50, the difference is between a page that barely scrolls and one that scrolls properly. It's a major problem--you basically can't use the `<Image>` component that comes with RNW for more than a few images. \r\n\r\nThe only option I see is rolling your own that can't properly center an image like you do with `background-size: cover`, or otherwise RNW will be incompatible with the `resizeMode` expectations of standard RN. \r\n"},"comment":{"url":"https://api.github.com/repos/necolas/react-native-web/issues/comments/254954895","html_url":"https://github.com/necolas/react-native-web/issues/227#issuecomment-254954895","issue_url":"https://api.github.com/repos/necolas/react-native-web/issues/227","id":254954895,"user":{"login":"RangerMauve","id":911495,"avatar_url":"https://avatars.githubusercontent.com/u/911495?v=3","gravatar_id":"","url":"https://api.github.com/users/RangerMauve","html_url":"https://github.com/RangerMauve","followers_url":"https://api.github.com/users/RangerMauve/followers","following_url":"https://api.github.com/users/RangerMauve/following{/other_user}","gists_url":"https://api.github.com/users/RangerMauve/gists{/gist_id}","starred_url":"https://api.github.com/users/RangerMauve/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RangerMauve/subscriptions","organizations_url":"https://api.github.com/users/RangerMauve/orgs","repos_url":"https://api.github.com/users/RangerMauve/repos","events_url":"https://api.github.com/users/RangerMauve/events{/privacy}","received_events_url":"https://api.github.com/users/RangerMauve/received_events","type":"User","site_admin":false},"created_at":"2016-10-19T22:06:09Z","updated_at":"2016-10-19T22:06:09Z","body":"You could try applying the transform on the parent container for the images, that way the might all be placed on one layer for the GPU.\r\n\r\nAn alternative to this might be some sort of gross canvas hacks, or absolute positioning tricks."}}
{"actor":{"display_login":"RangerMauve"}}