Text with .secondary vanishes when Material background is clipped to UnevenRoundedRectangle in ScrollView

I just found a weird bug:

If you place a Text view using .foregroundStyle(.secondary), .tertiary, or other semantic colors inside a ScrollView, and apply a Material background clipped to an UnevenRoundedRectangle, the text becomes invisible. This issue does not occur when:

The text uses .primary or explicit colors (e.g., .red, Color.blue), or

The background is clipped to a standard shape (e.g., RoundedRectangle).

A minimal reproducible example is shown below:

ScrollView{
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello World.")
                    .font(.system(size: 15))
                    .foregroundStyle(.quinary)
                    
            }
        }
        .padding()
        .frame(height: 100)
        .background(Material.regular)
        .clipShape(UnevenRoundedRectangle(topLeadingRadius: 10,bottomLeadingRadius: 8,bottomTrailingRadius:8, topTrailingRadius: 8))