Border lines appearing on images with background color

Question

I have a few images with which I'm using background-color.
HTML:

<nav id="mainNav">
    <ul id="buttons">
                <li><a href="javascript:;" class="askLink"><img src="https://dl.dropboxusercontent.com/s/tqbyzi5pm97d95m/Message.png"/></a></li>
    </ul>
</nav>

CSS:

 #mainNav {
    opacity: 0.75;
    filter: alpha(opacity=75);
    position: relative;
 }

 #mainNav ul {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
 }

 #mainNav li {
    display: inline;
    margin: 0.3em;
 }

 #mainNav img {
    height: 1.5em;
    background-color: blue;
    border: none;
 }

 #mainNav a:link, #mainNav a:visited, #mainNav a:hover, #mainNav a:active {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    color: blue;
 }

 #mainNav a.active {
    text-decoration: none;
 }

No issues occur on my standard setup, OS X Safari Version 7.0.6 (9537.78.2) but in iOS 7 Safari, border lines appear.
For example: and

What can I do to avoid this?
Thanks!

EDIT: Note how it appears on other sides of images, how is that?

I also tested the demo with my FF9 (Yes, shame on me!) and it worked fine. — Hashem Qolami, Sep 03 '14 at 11:44
Val, you need to say more about your setup where the issue happens. — Roko C. Buljan, Sep 03 '14 at 11:48
Can you inspect the image in a browser when the problem occurs and see what styles are being applied to it? — Dai, Sep 03 '14 at 11:54
Val... this is all we can see: http://jsbin.com/wunaca/1/edit and works good! — Roko C. Buljan, Sep 03 '14 at 12:00
@Roko Thanks, for me too except for in iOS Safari on iPhone or iPad — Peter V, Sep 03 '14 at 12:01
@ValKalinic what happens if you remove opacity from `mainNav` ? Seems to me that you'll need to set up images for double density screens — Roko C. Buljan, Sep 03 '14 at 12:01
@RokoC.Buljan the background and line color darkens but lines persist — Peter V, Sep 03 '14 at 12:04

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

I really suspect you did not resized/cropped properly your .png images.

A reason this might happen is that you'll need to double-check your .png images. Means, open them again in your favorite editor and remove the half-transparent borders that usually occur resizing an image and saving it as png with alpha transparency.

Also try to add to your img:

vertical-align: middle;

and make sure to take a look at <img> inside <a> gets blue border

edited May 23 '17 at 12:12

Community

1
1

answered Sep 03 '14 at 11:52

Roko C. Buljan

196,159
39
305
313

Checked the images and I still get https://www.dropbox.com/s/e8274kmhvrdf0tp/Screen%20Shot%202014-09-03%20at%2014.00.28.png?dl=0 for https://www.dropbox.com/s/fz2qw71pw5lw63i/Likes.png?dl=0 – Peter V Sep 03 '14 at 12:02
1

Probably it's a issue with high density screens, the parent with opacity set to 0.75, and the alpha rendering of the .png images on that OS – Roko C. Buljan Sep 03 '14 at 12:04
but it's on both iPhones and iPads Retina and non-Retina (and iOS 7 and 6) – Peter V Sep 03 '14 at 12:06
1

@ValKalinic Can you try with this image? http://i.stack.imgur.com/YJUy7.png and also try to add vertical-align to your image. – Roko C. Buljan Sep 03 '14 at 12:09
aah still: https://www.dropbox.com/s/1zn00yu9e5ge4zb/Screen%20Shot%202014-09-03%20at%2014.12.22.png?dl=0 – Peter V Sep 03 '14 at 12:13
1

@ValKalinic This might seem crazy but I'm almost out of suggestions. Seems like the resized .png images gets affected by half-pixel-precision smoothing... Can you try to do a madness? Add -webkit-transform: rotate(0.01deg); – Roko C. Buljan Sep 03 '14 at 12:18
thank you, interesting idea. sadly the lines still appear, and the affected element becomes blurry: https://www.dropbox.com/s/3d05t7r53yketyw/Screen%20Shot%202014-09-03%20at%2014.23.36.png?dl=0 – Peter V Sep 03 '14 at 12:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60536/discussion-between-roko-c-buljan-and-val-kalinic). – Roko C. Buljan Sep 03 '14 at 12:25

score 0 · Accepted Answer · answered Sep 03 '14 at 22:21

While I'm still not certain what exactly caused the issue, it is probably just a rendering glitch rare among browsers.

The solution I am using is simply replacing the used (.png) images with SVGs and background-color with CSS' ability to color .svg images. The code for this is CSS:

svg {
  fill: blue;
}

or replacing an actual color with currentcolor for making the fill same color as the parent element.

score -1 · Answer 3 · edited May 23 '17 at 12:12

-1

Try adding the border style to the image and set it to zero.

See How remove border around image in css?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 03 '14 at 11:43

Alex

870
2
9
19

OP never said the image is wrapped in `A` which is also clearly visible from the provided images in question. Also: http://stackoverflow.com/questions/2922858/img-inside-a-gets-blue-border – Roko C. Buljan Sep 03 '14 at 11:47

Border lines appearing on images with background color

3 Answers3