If you have a UI game object, like a panel, nested in your Canvas’s hierarchy that needs to be forced to sort on top of other objects and it needs to be interactable and block raycasts it does not appear to work. Visually it is on top, but the clicks are registered with the hidden game objects and not blocked or registered with the selectable items on the visually higher priority panel.
E.g. create a button with a dynamic sub-panel that is activated and made visible when you click the button. Create a second button below the first button that should be hidden by the first buttons pop-up panel. Add a canvas group to the panel so that it blocks raycasts and isinteractable. If you run at this point the pop-up panel will appear behind the second button. Add a canvas component and set it to override sorting, set the sort order to 1. Panel now appears in front of button 2, but you can still click through to button 2. Add a button onto the pop-up panel and give it an OnClick to do something. Note, you cannot click the button on the pop-up panel because the click is absorbed by Button 2 or the main canvas or something. It is like the sort order does not impact the UI interaction order/layering. This is true in the editor/player and on device for iOS in 4.6.1
Anyone know of a fix or workaround? It was mentioned way down tacked onto another thread, but no answer.
thanks
I have posted an answer here 1 hour before but it has disappeared @@, so I will post again.
I was facing the same problem with you, my case have 3 Canvas , A- bottom layer, B - mid layer, C top layer, top here means it can be seen on top.
The case is, even Obj in C, let say, a button, can be seen on top of everything, the raycast think it reach button in B before button in C. That is, When C’s button covered B’s button, when there is a click, B’s button is clicked instead of C’s.
The strange thing is, when it apply to A and B canvas, it works perfectly.
I think it was due to some bugs in the sorting layer of raycast??
Workaround:
- put a real button in B and covered it by C, when you press C “button” (it can be an image only), you are actually pressing the real B button. This method is stupid and not preferred because you need to create an extra obj and no button effect can be applied as you are not pressing what you are seeing.
- add canvas group component to B’s button, when they are covered, set the interactable and block raycast to false. This should be work, but not working in my case because my B canvas have a skilltree and C cavas is the frame. B can be scrolled anywhere and what block the C’s button are those skillbutton in the skilltree, which can be moved and is difficult to detect if they are covered by C’s frame or not.
- My solution, apply a mask, which the size will not covered C’s button area, it fix everything and works perfectly.
Although finally the workaround works but this should be a bug and the canvas sorting layer sometimes does not work as expected, hope they will fix it in 4.6.2.
Bump. This is still the case. Any suggestions?