I think I have identified the cause the verified it. It is a know issue/variance/behavior of webkit based browsers like chome and safari. The rendering engine does not honor the 'no-repeat' property of 'background-image'. This is why if you look carefully at the distorted image above, you see the background arrow image is repeating.
So, if you change this line ....
background-image: url(
http://www.oracleimg.com/us/assets/red_arrow_box.gif)
to ...
background-image: url(
http://www.oracleimg.com/us/assets/red_arrow_box.gif) no-repeat
The page will display correctly. Here's a reference to a similar bug
http://code.google.com/p/chromium/is...etail?id=35697
So far, I have found not fix or workaround.