Opera Mobiles css3 rendering problems

StackOverflow https://stackoverflow.com/questions/11794451

  •  24-06-2021
  •  | 
  •  

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

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!

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top