Layout issue using .strokeBorder modifier

Hello, Developers!

While writing custom view modifier I ran into unexpected behavior of .strokeBorder modifier. The underlying content seem to be “bleeding” outside of the stroke border edges, even though they share the exact same shape for their layout.

This issue relevant for both Xcode Previews and on-device testing.

Maybe someone has experienced this issue before, I'd be glad to see your opinion on this matter.

Thanks for the post, hard to see your code, will be better if you post it as code to copy and paste, did you defined the color of the strokeBoarder like?

.overlay {
        Circle()
          .strokeBorder(.black, lineWidth: 4)
      }

In my opinion and observations, this may happens when anti-aliasing is applied to the view’s edges which results in partially transparent pixels to smooth out the transition between the view and its background?

To remedy this issue we can set the rasterizationScale modifier on the view that is getting the strokeBorder applied to match the screen scale and force Sharp edges.

Let me know. Also looking for other SwiftUI developers opinion.

Thanks,

Albert Pascual
  Worldwide Developer Relations.

Layout issue using .strokeBorder modifier
 
 
Q