SwiftUI wrong label position during animation

Question

I'm trying to create a date picker using SwiftUI and faced a strange behaviour of my title during date selection.

Let me try to explain what is going on. Every first day of the month has a small label above the day number. (see gif above). Whenever user selects first day of a month the label with month name should disappear. Everything is okay at this point. But. If user deselects this day by clicking on another date label appears but in wrong position (with small offset). (I have feeling that label renders at the correct position but ignores animation)

Unfortunately, my component is big enough to place all code here. But I will try to put some parts of it.

Here is a part of code which is responsible for the title appereance

...
GeometryReader { geometryProxy in
      Button(action: handleDateSelect) {
        VStack {
          if isFirstDayOfMonth && !isSelectedDate {
            Text(getMonthName(date: date)).font(.caption)
          }
          
          Text(String(dayNumber))
            .background(
              Circle()
                .fill(isSelectedDate ? Color.blue : isToday ? Color.blue.opacity(0.1) : Color.clear)
                .frame(width: geometryProxy.size.width * 0.8, height: geometryProxy.size.height * 0.8)
            )
        }.frame(width: geometryProxy.size.width, height: geometryProxy.size.height)
        
      }
}
...

As far I don't use existing ScrollView because of lack of customisation I created a custom one. In my custom "ScrollView" I animated snap (when user clicks on a day item) like this

...
    withAnimation(.spring()) {
      scrollOffset = nextScrollOffset
    }
...

If anyone knows the possible solution to the problem or resources where I can find similar issues. I would appreciate that

Thanks in advance

question from:https://stackoverflow.com/questions/65908957/swiftui-wrong-label-position-during-animation

Answer 1

Waitting for answers