I'm dynamically loading a png logo image with transparent background. So basically the logo is colorful and the background is transparent.
But why is the image transparent area white when viewing the webpage on an iPad device?
Asked
Active
Viewed 1,112 times
1
-
1Do you have some code or an example? Is it working in desktop? – lharby Apr 20 '15 at 17:46
-
@lharby: thanks. I just want to know if there is a common issue with transparent PNG on iPad/iPhones? Yes, the transparent area stays as transparent when viewing on the normal PC browser. – Becky Apr 20 '15 at 17:50
-
Are you using a css reset? – henry Apr 20 '15 at 17:51
-
@henry: thganks. No, I'm not using css reset. – Becky Apr 20 '15 at 17:52
-
@Beki I have never encountered any issues displaying transparent PNGs on the iPad or iPhone. Are you sure the element (div, span, etc.) that you are placing the image into isn't assigned or inheriting a white background in your CSS? – eat-sleep-code Apr 20 '15 at 17:53
-
1fwiw, you can run Safari's (limited, for html/css developers) inspector on a connected iOS device or on Xcode's iOS simulator. Connect your phone or open the simulator, open up Safari, and you'll find it in the iOS agent in the developer menu (you may have to enable that menu first) – henry Apr 20 '15 at 17:56
-
great! did you figure out what was going wrong? if it's something that might be useful to others, this is the place to document it – henry Apr 22 '15 at 06:54
2 Answers
1
This question is already answered: Alpha transparent PNGs not displaying correctly in Mobile Safari
According to his answer you cant use a 1x1px image, but a 2x2px will work perfectly!
Community
- 1
- 1
CrazzyMarc
- 33
- 8
-
That question is fascinating, but this is not a duplicate: OP is asking an image with some transparent areas – henry Apr 22 '15 at 06:52
1
I had the same problem. I solved this, with this css rule:
background-color: rgba( 255, 255, 255, 0.0);
Kishan Bharda
- 5,446
- 3
- 30
- 57
