Animated objects always show on top in Chrome

The animated objects are appearing on top of the slide when viewing on Chrome (publishing with HTML5 only).

In Powerpoint, the answer text boxes are at the top of the slide in front of all other objects (see Picture 1). I added a fade-in animation to the red rectangles, they should appear behind the text boxes at the same time.

Picture 1:

 

I published the file with HTML5 only. When viewing on Chrome, the red rectangles are appearing on the top of the slide. However, it works perfectly on IE.

While resizing the browsing window on Chrome, from smaller to larger (1>2>3>4=full screen), the red rectangles still covered some of the objects (see Picture 2). 

Picture 2:

Here are my presenter player settings:
Browser size: Resize to browser to fill screen
Player size: Scale player to fill browser window

 

Does anyone else have the same problem? May I know how to solve it?

Thanks!