Swift Chart - Foreground style negative opacity glitch

chart_opacity_glitch.swift

import SwiftUI
import Charts

@available(iOS 16.0, *)
struct ContentView: View {
    @State private var opacity = -0.5

    var body: some View {
        VStack {
            Chart(SalesData.last30Days, id: \.day) {
                AreaMark(
                    x: .value("Date", $0.day),
                    y: .value("Sales", $0.sales)
                )
                .foregroundStyle(Gradient(colors: [.blue, .blue.opacity(opacity)]))
                .interpolationMethod(.cardinal)
            }
            .frame(height: 350)
            Spacer()
            Rectangle()
                .foregroundStyle(Gradient(colors: [.blue, .blue.opacity(opacity)]))
                .frame(height: 350)
            Spacer()
            Text("Opacity: \(opacity)")
            Slider(value: $opacity, in: -5...5)
        }
    }
}

func date(year: Int, month: Int, day: Int = 1, hour: Int = 0, minutes: Int = 0, seconds: Int = 0) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day, hour: hour, minute: minutes, second: seconds)) ?? Date()
}

enum SalesData {
    static let last30Days = [
        (day: date(year: 2022, month: 5, day: 8), sales: 168),
        (day: date(year: 2022, month: 5, day: 9), sales: 117),
        (day: date(year: 2022, month: 5, day: 10), sales: 106),
        (day: date(year: 2022, month: 5, day: 11), sales: 119),
        (day: date(year: 2022, month: 5, day: 12), sales: 109),
        (day: date(year: 2022, month: 5, day: 13), sales: 104),
        (day: date(year: 2022, month: 5, day: 14), sales: 196),
        (day: date(year: 2022, month: 5, day: 15), sales: 172),
        (day: date(year: 2022, month: 5, day: 16), sales: 122),
        (day: date(year: 2022, month: 5, day: 17), sales: 115),
        (day: date(year: 2022, month: 5, day: 18), sales: 138),
        (day: date(year: 2022, month: 5, day: 19), sales: 110),
        (day: date(year: 2022, month: 5, day: 20), sales: 106),
        (day: date(year: 2022, month: 5, day: 21), sales: 187),
        (day: date(year: 2022, month: 5, day: 22), sales: 187),
        (day: date(year: 2022, month: 5, day: 23), sales: 119),
        (day: date(year: 2022, month: 5, day: 24), sales: 160),
        (day: date(year: 2022, month: 5, day: 25), sales: 144),
        (day: date(year: 2022, month: 5, day: 26), sales: 152),
        (day: date(year: 2022, month: 5, day: 27), sales: 148),
        (day: date(year: 2022, month: 5, day: 28), sales: 240),
        (day: date(year: 2022, month: 5, day: 29), sales: 242),
        (day: date(year: 2022, month: 5, day: 30), sales: 173),
        (day: date(year: 2022, month: 5, day: 31), sales: 143),
        (day: date(year: 2022, month: 6, day: 1), sales: 137),
        (day: date(year: 2022, month: 6, day: 2), sales: 123),
        (day: date(year: 2022, month: 6, day: 3), sales: 146),
        (day: date(year: 2022, month: 6, day: 4), sales: 214),
        (day: date(year: 2022, month: 6, day: 5), sales: 250),
        (day: date(year: 2022, month: 6, day: 6), sales: 146)
    ]
}

In dark mode there is a noticeable graphical glitch with the foregroundStyle when using a Gradient with a negative value.

The video shows the graph on top and a plain Rectangle with the same foregroundStyle applied.

As shown, the glitch only occurs on the Graph (only noticeable in dark mode).

Simulator.Screen.Recording.-.iPhone.13.Pro.Max.-.2022-06-18.at.16.02.45.mp4

Raised FB10337403

Resolved in Xcode 14, beta 3.