3

The app I'm developing has many images with transparent areas (so we can make the image 'skinned' by setting the background-color CSS property).

This works fine in every browser I've tested, except for windows phone, where we get nasty artifacts around the edge of the image -pixel- thin lines at the top and bottom, and sometimes at the sides, of the image.

I've tried setting padding, margin, border to 0px, but the artifact still remains.

The following question recommends setting background-repeat: no-repeat, but that seems only to work for background-image, not background-color:

Windows Phone IE mobile bugs with transparent background-image and bottom absolute positionning

Does anyone know how to override or disable this border?

Community
  • 1
  • 1
user2258085
  • 51
  • 2

2 Answers2

0

This may be a good opportunity to use SVGs instead of using transparent images like pngs. While I tend to agree with bjb568 that Windows Phone is not widely used, their answer is unconstructive and doesn't help the asker or anyone else viewing this question.

SVGs can be a really powerful tool for developing high-res scalable graphics with zero artifacts or noise for both mobile devices and desktops. Chris Coyier has a great writeup about it. Check it out here > http://css-tricks.com/using-svg/

If your images have to be images and not vectors (like photographs), what file format are you saving them as? Remember to be as detailed as possible when asking questions on StackOverflow so people can best help you :)

kettultim
  • 244
  • 1
  • 4
  • 15
0

Could you try to add on your image : -webkit-backface-visibility: hidden

Fabrice
  • 161
  • 1
  • 8