Question about an States within a button set anomaly

I am putting together a small interaction that uses 5 icons in a Button Set.  When the user clicks each icon, the icon state changes to the Selected state.  All that works fine.  The anomaly starts when you click in a certain area of the icon.

What I can tell you is that the order of the icons in the timeline is important to how the state behaves.  

In my example, the row of icons, can also be the order in the column.  That is to say, you have 5 icons in the row.  They can be numbered 1-5 going left to right.  Convert that to a column, it would read 1-5 going top to bottom.

Here is where it gets strange.  You can click on any part of the icon to start and it will change the state as expected.  However, if you click on the bottom half of the icon to the right of your starting icon, it will not change the state (top will work).  If you click the bottom half or top half of the icon to the left, it will change the state. The top part of the icon behaves as expected.  Only the bottom top half and bottom half of the icon to the left of your starting icon is available.

This is where my question begins.  

Why does this behave like that?  I can say that it seems to follow the order on the timeline AND in the selected state there is a solid, color image that is the BG for the text.  The text and the icon is "IN FRONT" of the color image.

I am posting the example for anyone who thinks they can figure this out.  I have played with the order of the shapes (bring to front, move to back, etc) and it won't solve the problem.

Thank you for your help.