Fixing One-Pixel Edge Artifacts in Jetpack Compose drawBehind
How one extra tab exposed a fragile rendering edge case in an inDrive design-system component — and how a small overscan made the result robust.
A TabBar looked perfect with four tabs and broke with five. Here is how we traced a one-pixel seam to edge-aligned drawing and made the component robust.
At inDrive, a design-system component is only finished when it behaves correctly in every supported state.
While building a TabBar for our Android design system, we found a case that looked perfect with four tabs and failed with five: thin dark lines appeared on both outer edges of a white vertical gradient.
The fix took only a few lines. Understanding why it worked was more valuable.
Four tabs passed. Five tabs found the bug.
The initial implementation
The component needed a gradient behind its content. We used Modifier.drawBehind because it gives direct access to the component’s DrawScope and...
Copyright of this story solely belongs to hackernoon.com. To see the full text click HERE
