Board Game Arena

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.)

I had a similar experience with Carnegie. In earlier builds, there were shadows everywhere, and it was almost unplayable on iOS and would always cause fans to spin up on my laptop. After replacing most of the shadows with prerendered shadows baked into the png, things are better, but I still haven't gotten rid of them entirely (yet).

When filter shadows were added to only 6 PNGs in Tzolk'in, and that was enough to impact performance for users running OS X and iOS devices:
https://boardgamearena.com/forum/viewto ... 87&t=15776

The latest version of Carcassonne with the new artwork also uses filter: drop-shadow for meeples, and that may be the reason there have been so many complaints about performance: https://boardgamearena.com/forum/viewto ... 30&t=16886

I would not recommend filter: drop-shadow as anything other than a quick, temporary step while designing the interface, to see where baked-in shadows on PNG's would be worthwhile to implement.

Yep, dont use it unless you want safari to lag.
Box shadow is fine though

Alternate suggestions if I want to add drop shadow to an icon font or SVG (e.g., from external library like https://iconify.design/)?

Is there any performance difference/benefit to using SVG <filter> like https://stackoverflow.com/a/51681126/687315 for adding drop-shadow in Safari? It seems Safari supports at least some SVG filters per another question, https://stackoverflow.com/q/47942581/687315

I think we should not be basing design decicions on the fact safari lags. It lags today and probably will be fixed in few months/years,
browsers improve very fast. If it lags badly just exclude this from rendering and macos user can suffer without shadows

.on_laggy_browser .myobject_with_shadow {
filter: none !important;
}