Matching Drop Shadows
The image above shows the same drop shadow values, rendered by CSS on the web, Android, and iOS. It’s a dark and extreme shadow, to make the differences more pronounced. The shadows are black, with no X offset, 24px Y offset, and a 24px blur radius. I’ve used “px” when noting the values, but when building each test app to generate the images for this article, I used the platform’s equivalent unit — dp on Android, and points on iOS.
The CSS and Android examples may look the same, but they’re slightly different. The image below demonstrates that the Android shadow is slightly blurrier.
[…]
The Android blur radius scale factor isn’t quite as straight forward. Android uses Skia for a lot of its rendering, and the source code mentions scaling the blur by 1 / sqrt(3) because “Safari does the same”, and that “it actually should be 1”. Those comments are quite old, and Safari has since changed to be in line with the CSS spec. That means Android’s shadows don’t match CSS, because of Safari. Wild.
