android - Removing the ugly border rendering on box-shadow in mobile Chrome -

android - Removing the ugly border rendering on box-shadow in mobile Chrome -

the problem next - on mobile chrome (google nexus 5) box-shadows have ugly visible border, instead of seamless transition background underneath. there way right that? it's not visible on of desktop browsers. chrome device emulator displays properly.

any ideas? prefixing not help... though substituting shadows linear-gradient background, requires additional, non-semantic markup , hella tricky in comparing comma-separated shadows.

http://i.stack.imgur.com/frc3c.png

edit: mentioned in comments (thanks, @vlrprbttst) - it's not inset shadow.

i have fixed header , footer, need drop shadow on background. problem is, can't alter layout, need modernize it. previous designer used pngs backgrounds, figured it's gonna improve if replace images css3 cut down amount of http requests. complaints it's ugly - justified ones.

android css google-chrome border css3