Color Sections Not Behaving Right in Firefox on Tablet

Hi Guys!

I’m almost done with a client’s new site, but for some reason, the two color sections on the page are not behaving right in Firefox. On desktop browsers, in Chrome on my ASUS TF300 tablet running Android 4.1.1 (apparently the highest it’ll go), on my Galaxy S3, and on the iPhone4 I use for testing, it looks great. However in Firefox and the Android browser on the TF300, it has issues, and I was hoping you guys might be able to help me find where the problems are. For the top color section with the guns and ammo on the flag, the background is just set to scroll, not repeat, and always be 100% of the container width. The background of the lower color section, the one with the faded bullets, is set to do the parallax scroll.

In Firefox, it looks like the lower color section has pushed the upper one right off the top of the screen. The guns/ammo/flag appear for a split second before getting displaced, then the lower section (bullets) settles into place and stays.

In the Android browser, the color sections are fine, and everything looks great–until you scroll. When you scroll, the sticky header actually moves down the screen as the content is moving up. When you scroll back, the header moves back up, but not quite to the top.

I’ll post the URL in the private content section below.

I’d appreciate any input you guys may have.

Thanks!