glassEffect modifier makes DragGesture no longer work

I have the following SwiftUI code for a draggable UI.

  private var onTouchDownGesture: some Gesture {
    DragGesture(minimumDistance: 0)
      .onChanged { value in
        isDragging = true
        updateYTranslation(value.translation.height)
      }
      .onEnded { value in
        isDragging = false
        updateYTranslation(value.translation.height)
      }
  }

var body: some View {
     VStack {
          Image(systemName: "chevron.up")
          Spacer()
            .frame(height: 16)
          Image(systemName: "chevron.down")
        }
        .padding()
        .gesture(onTouchDownGesture)
        .glassEffect(.regular.interactive(false))
    }
}

I find that if I use glassEffect modifier, then the drag gesture will not work. However, if i change it glasseffectto other kinds of background like .background(Capsule()), then the drag gesture works as expected.

Is this a known issue of glassEffect or am I using it incorrectly?

Answered by DTS Engineer in 850732022

If you tend to drag the whole VStack + glass material, consider moving .gesture after .glassEffect. The following code works for me:

@State private var dragOffset = CGSize.zero

VStack {
    Image(systemName: "chevron.up")
    Spacer()
        .frame(height: 16)
    Image(systemName: "chevron.down")
}
.padding()
.glassEffect()
.offset(x: dragOffset.width * 2)
.gesture(onTouchDownGesture)

private var onTouchDownGesture: some Gesture {
  DragGesture(minimumDistance: 0)
    .onChanged { value in
        dragOffset = value.translation
    }
    .onEnded { value in
        dragOffset = .zero
    }
}

(You didn't include updateYTranslation and so I replaced it with dragOffset.)

I am on Beta 4, btw.

Best,
——
Ziqiao Chen
 Worldwide Developer Relations.

If you tend to drag the whole VStack + glass material, consider moving .gesture after .glassEffect. The following code works for me:

@State private var dragOffset = CGSize.zero

VStack {
    Image(systemName: "chevron.up")
    Spacer()
        .frame(height: 16)
    Image(systemName: "chevron.down")
}
.padding()
.glassEffect()
.offset(x: dragOffset.width * 2)
.gesture(onTouchDownGesture)

private var onTouchDownGesture: some Gesture {
  DragGesture(minimumDistance: 0)
    .onChanged { value in
        dragOffset = value.translation
    }
    .onEnded { value in
        dragOffset = .zero
    }
}

(You didn't include updateYTranslation and so I replaced it with dragOffset.)

I am on Beta 4, btw.

Best,
——
Ziqiao Chen
 Worldwide Developer Relations.

glassEffect modifier makes DragGesture no longer work
 
 
Q