Two identical waveform views don't always line up

[ChrisJAWerner]

Hey there! I'm attempting to do playback progress indication by generating two waveform views and then masking one:

let configuration: Waveform.Configuration = .init(
    style: .striped(.init(color: .gray, width: 1, spacing: 2))
)

GeometryReader { proxy in
    ZStack(alignment: .leading) {
        // Static waveform view, showing the whole file
        WaveformView(audioURL: audioURL, configuration: configuration)
            .frame(width: proxy.size.width)

        // Animated progress indicator, masked to the same waveformView, to show the progress
        let width = min(progress * proxy.size.width, proxy.size.width)
        Rectangle().frame(width: width).foregroundColor(.blue).mask(alignment: .leading) {
            WaveformView(audioURL: audioURL, configuration: configuration)
                .frame(width: proxy.size.width)
        }
    }
}

However, sometimes the masked waveform view doesn't line up with the unmasked one.

I've used a view inspector to verify that both views have the exact same frame, but sometimes the blue one is misaligned to the left, sometimes to the right, and sometimes correctly. Any advice would be most appreciated! Thanks!

[dmrschmidt]

Hey @ChrisJAWerner let me try to reproduce this with your sample code and get back to you.

[dmrschmidt]

OK just tried it inside the example app quick and dirty and can not reproduce the behavior.

Check out https://github.com/dmrschmidt/DSWaveformImage/commit/578a526560050d8818ec4bd486a2c31c2850352b in this branch.

Please run the example app form that branch and see if you get the problematic behavior.

• If you cannot reproduce it there, I'd for now assume that there is maybe something else in your view hierarchy that messes with the frames.
• If you can reproduce it, it may be an iOS version thing. In that case please let me know your exact environment.

I can have another look if you can provide me with a stripped down example app that I can run in Xcode to debug.

I find stripping down my problem to an example app that has the minimum code to reproduce the issue more often than not also helps me find out what the actual problem is and how I can fix it.

[ChrisJAWerner]

Ah, you're right. I tried cutting just that part out into a separate app and it worked perfectly every time. I should have tried that sooner! I'll figure out what else in my project is mucking with that frame. Thanks!!