Using compositing group for unifying shapes within buttons in SwiftUI

We are adding some in-app purchase buttons in our next update in Exsto and we noticed a visual glitch in button pressed state. Since our buttons have a complex hierarchy with a tag and a border, the transparent layers weren't blending correctly by default. The border and tag each became semi transparent and blended into each other.

We could fix the visual glitch by applying the compositingGroup() modifier to the ZStack containing both shapes.

Button {
    // button action
} label: {
    MainContent()
        .background {
            ZStack {
                ButtonOutline()
                SavingsTag()
            }
            .compositingGroup()
        }
} 

Level up your Swift skills!$35

100+ tips to take your Swift code to the next level

Swift Gemsby Natalia Panferova

• Advanced Swift techniques for experienced developers bypassing basic tutorials
• Curated, actionable tips ready for immediate integration into any Swift project
• Strategies to improve code quality, structure, and performance across all platforms

Level up your Swift skills!

100+ tips to take your Swift code to the next level

Swift Gems

by Natalia Panferova

$35