When I display 2/3 of the poster on tvos, after setting it according to the code, some semi-transparent background can be seen in the upper left and right corners of the image when it is in focus. How can I eliminate it? struct HighPosterView: View { let media: MediaDetail @State private var isShowingDetails = false @Environment(\.isFocused) private var isFocused: Bool var body: some View { Button { isShowingDetails.toggle() } label: { HighShelfImageView(imageURL: media.posterURL) .contentShape(RoundedRectangle(cornerRadius: 24, style: .continuous)) .hoverEffect(.highlight) Text(media.displayTitle) .lineLimit(1) .font(.subheadline) .frame(maxWidth: 300) } .buttonStyle(.borderless) .animation(.smooth) } } struct HighShelfImageView: View { let imageURL: URL? var body: some View { KFImage.url(imageURL) .targetCache(ImageCacheManager.shelfCache) .setProcessor(ImageCacheManager.mediaListShelfProcessor) .placeholder { Color.primary.opacity(0.1) .cornerRadius(Constants.cornerRadius) } .cancelOnDisappear(true) .cacheMemoryOnly(false) .fade(duration: 0.1) .cacheOriginalImage(true) .resizable() .aspectRatio(2/3, contentMode: .fill) .clipShape(RoundedRectangle(cornerRadius: Constants.cornerRadius)) } } I need to keep the image and text distributed vertically, keep customize corner, with the text pushed aside when the image is in focus.