So I can repeat this issue on Android.
A few points to note:
- The rAF call explicitly waits until the next animation frame
- The Yield call does not use rAF (though no reason it couldn't be made to!) so it doesn't necessarily wait until the next animation frame.
- Both calls, we see the button click registering and adding the "Button clicked" output. So both are "reliable" in that the code is executed.
So it appears to me that Android just sometimes includes the setTimeout call in this animation frame and therefore both the updating of the background colour to yellow, and the reverting to green, happen in the same animation frame and so no change in colour is actually painted or seen. I'm not sure why Android does this more than Desktop (interestingly enough I can't get Safari to do this on iOS), but imagine it's a performance optimization to try to reduce the number of paints by more aggressively bundling multiple tasks into one animation frame where it can. However, as I say, both are "reliable" in that the code is executed - just your demo cancels out the update so when merged no change is seen.
If you explicitly want a paint to happen in between then you should use rAF in the yieldToMain function. I've added a third button in my demo that does this and you can look at the code to see that working.