The BGA cookbook has a few paragraphs about using filter: drop-shadow in css to add a cool shadow effect to pieces and tokens. However I wondered whether anyone else's experiences had been similar to mine and whether this page might need to be edited.
Firstly there are general concerns about performance. Even on the page there is a suggestion to disable drop-shadows as a user-preference (although quite likely no user who needs that is ever going to find it!) Some references suggest that drop-shadow performance should be better than box-shadow because it can access the GPU for hardware acceleration, but this hasn't seemed to bear out in practice.
Secondly, I had all kinds of problems getting them to work reliably (and to be clear, this is on today's browsers, not some ancient versions). In Chrome, shadows would flicker on some objects that were animating, or had something near them animating. In Safari, bits of shadows would get left behind when some objects moved. (I have seen both these problems in other BGA games as well). I generally managed to get these to look correct by adding isolation: isolate; will-change: filter; to elements until they stopped going wrong, but I have a feeling this contributed further towards the performance issues.
In Steam Works I have just pushed an update in which I removed drop-shadow entirely. Now shadows of any irregular shapes are baked into the PNG image, and shadows of all rectangles, rounded rectangles and circles are drawn with box-shadow. This has been a massive increase in performance - particularly on mobile but actually also noticeable on desktop. Previously, (testing on quite an old iPhone 6S) even just scrolling up and down the window would be stuttering and low frame-rate, and you would quite often see blank areas scrolling into view with the content appearing a second later. With the new code this no longer happens, and even though I have a hundred or more elements with box-shadow, scrolling and animation are silky-smooth as they should be.
(One trick I do use, is not ever to animate a box-shadow directly, but only to animate the opacity of an element with a box-shadow. Browsers can draw this by only recompositing and not having to repaint.)
Firstly there are general concerns about performance. Even on the page there is a suggestion to disable drop-shadows as a user-preference (although quite likely no user who needs that is ever going to find it!) Some references suggest that drop-shadow performance should be better than box-shadow because it can access the GPU for hardware acceleration, but this hasn't seemed to bear out in practice.
Secondly, I had all kinds of problems getting them to work reliably (and to be clear, this is on today's browsers, not some ancient versions). In Chrome, shadows would flicker on some objects that were animating, or had something near them animating. In Safari, bits of shadows would get left behind when some objects moved. (I have seen both these problems in other BGA games as well). I generally managed to get these to look correct by adding isolation: isolate; will-change: filter; to elements until they stopped going wrong, but I have a feeling this contributed further towards the performance issues.
In Steam Works I have just pushed an update in which I removed drop-shadow entirely. Now shadows of any irregular shapes are baked into the PNG image, and shadows of all rectangles, rounded rectangles and circles are drawn with box-shadow. This has been a massive increase in performance - particularly on mobile but actually also noticeable on desktop. Previously, (testing on quite an old iPhone 6S) even just scrolling up and down the window would be stuttering and low frame-rate, and you would quite often see blank areas scrolling into view with the content appearing a second later. With the new code this no longer happens, and even though I have a hundred or more elements with box-shadow, scrolling and animation are silky-smooth as they should be.
(One trick I do use, is not ever to animate a box-shadow directly, but only to animate the opacity of an element with a box-shadow. Browsers can draw this by only recompositing and not having to repaint.)
