Post

Replies

Boosts

Views

Activity

Applying .cornerRadius results in artifacts on view corners
I have a ZStack with the following layers background color image layer (optional, if the data representing the item contains an image url) text that has a background behind it When attempting to apply either the .cornerRadius or .clipShape modifier, the background seems to "peek through" the top layer (very faintly, but very noticeable on-device). I am not sure what I am doing wrong. Any help would be appreciated. Code and partial screenshot are below. Note that you may need to zoom in on the screenshot. It's quite noticeable on-device though. ZStack(alignment: .bottomLeading) { Color.gray if let image = recipe.thumbnailImage { RemoteImageView(url: image.makeUrl(withResolution: .thumbnail)) .aspectRatio(contentMode: .fill) .flexibleFrame() } VStack(alignment: .leading, spacing: Spacing.small) { Spacer() VStack(alignment: .leading, spacing: 4) { Text("\(recipe.likes)") Text(recipe.name) } .frame(maxWidth: .infinity, alignment: .leading) .padding(8) .background( LinearGradient(gradient: Gradient(stops: [ Gradient.Stop(color: .clear, location: 0), Gradient.Stop(color: Color(.secondarySystemBackground), location: 0.45), Gradient.Stop(color: Color(.secondarySystemBackground), location: 1) ]), startPoint: .top, endPoint: .bottom) ) } } .aspectRatio(0.75, contentMode: .fill) // .cornerRadius(8) .clipShape(RoundedRectangle(cornerRadius: 8))
1
0
1.2k
Jun ’21