Opera Mobiles css3 rendering problems

Question

when testing my website using Opera Mobile, I discovered some serious problems which I've no idea why they happen and how to fix them.

Here's a comparison between FF (Windows) and Opera Mobile (FF renders as expected):

Here's the jsfiddle with the source

Here are the differences:

1. 1st image looks weird.
2. 4th image disappeared.
3. Images has partially/missing border-radius.
4. box-shadow is missing.

I'm pretty sure that the box-shadow and border-radius are the main cause for the problems, because when removing them everything looks fine.

I would like to know why it occur and how to fix it....

Thank you very much!

Answer 1

When you are removing opacity does it work better? It seems there is a very unfortunate bug mixing box-shadow and opacity. And it is tracked by CORE-39908 at Opera. I will add your example jsfiddle example to the bug report.