operacssopera-mobile

Opera Mobiles css3 rendering problems


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):

enter image description here

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!


Solution

  • 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.