Opacity of the button affects its "clickability"

281 Views Asked by At

I've run into a very strange issue. I have a SwiftUI app (iOS) where I have a full-screen ZStack: inside, as a "bottom layer", I have a full-screen Map, and on top I have a button (it is LocationButton - but it doesn't really matter, the behaviour is the same with a regular Button too).

My button has an opacity modifier, which sets it to 0.5, and a corresponding action. At this point, everything works: I can scroll the map, I can click the button - and the action will be executed.

However, as soon as I added .onTapGesture to the map - the button started to behave oddly. Only some clicks were propagated to it. It's almost like I had to hit a few specific pixels of the button to get its action executed.

I spent a couple of hours experimenting with the layout and different modifiers - nothing seemed to help. For example, I tried adding .contentShape(Rectangle()) to the button - no luck. But, eventually, I noticed an interesting effect: if I remove the opacity from the button - it works again. Then I tried intermediate values for the opacity - it seems that the lower is the opacity (the more transparent is the button) - the more tricky it's to hit it with a tap (even though the size is not changed).

Can someone explain to me, why does opacity in this specific layout affects the "clickability" of the button? Because it doesn't affect it when I don't have .onTapGesture on my map - so I think it must be somehow related...

0

There are 0 best solutions below