Getting a line on a background image on chrome

I have a background image on a div. it works on Safari, Firefox, IE-10, Edge but when it comes to chrome it show a line as it is shown in the following image:

.
how can be this kind of problem acheived?

css:

.certain-div:before{
        position: absolute;
        @include retina("/content/brand/0/images/footer-zigzag.png", 3, 18px 10px, left top repeat-x #fff);
        content: "";
        left: 0;
        right: 0;
    }

Hi,

We can’t really debug a picture so would need to see the problem at first hand or at least a reduced test case that exhibits the problem.

If you can’t link to a demo then attach the real image you are using to this post so that we can set up a demo to debug.

here is a link if you want to check.https://jsfiddle.net/10jr9r9j/#&togetherjs=Fj1liHCxfd
Check it on low resolutions as well

Do you see the same problem in Chrome using data instead of the image?

.background-image:before{
  position:absolute;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAYElEQVQoz6XMsQmAMBBA0R9uC8HGGdJcJ2SwZDUnsZGsoZUQUHMm+fXngZHXEL2GaH1iIUAC1mleyMe+NUMFclfF5CdiYtKAVDFpRD4x6UBeMelEHpgbQMqS8xrOQQSACw+DLjI497N3AAAAAElFTkSuQmCC");
  backgroun-size:100%; a 
  height:10px;
  content:"";
  background-repeat:repeat-x;
 top:-8px;
  left:0;
  right:0;
}

You may not see any line on the desktop but you will definitely see it on the mobile phone Samsung S6

Have you used a high quality image created at 3 times the normal size for retina devices? e.g. if the repeated images is 18px by 10px then for mobile it needs to be created at 54px x 30px and then resized with background-size to 18px 10px. The image has to be created at that size and not simply resized.

Make sure you size the element exactly and set the background size in pixels to match the image size.

Alternatively try converting the image to svg and see if that works better.

In desktop it looks fine in Chrome but I notice that if I adjust the background size height to 1px larger than the image then I get a line across the top as per your picture. This makes me think that there is either a problem with Samsungs rounding algorithm or its a problem with that image.

I’m afraid its going to be a matter of test and see as I don;t have a samsung to text on.

Or you could use a linear gradient and avoid images altogether.

e.g.

5 Likes

Thanks. Worked Perfectly!!

after implementation I was surprised with this result on samsung

css:
&:before {
content: “”;
position: absolute;
left: 0;
right: 0;
height: 10px;
background-color: black;
background-image: linear-gradient( 135deg, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 252, 0) 25%), linear-gradient( -135deg, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 35%);
background-size: 19px 10px;
background-repeat: repeat-x;

That’s weird. I assume you are sure that its not a cached page you are looking at?

If it definitely is the new page then the next step is to make a reduced test case so that we isolate the bug from anything else on that page. I would create a div with the new rules (rather than using :after) just for testing and put it on a page of its own and then look at it on your samsung.

If the issue occurs then we know its something to do with that specific code and then you can look at changing background-size by a 1px at a time and see if due to rounding issues the problem goes away.

The main issue I see is that you are only seeing this problem on this item and I would have assumed that you would see it on all your other images or gradients also. It certainly looks like a scaling bug of sorts and I would try the reduced test case to see if we can isolate it. Only once we know that the problem is in that snippet of code can we then try a few different variations to see if they have any effect on the problem.

Try adding a background-position to the rule as I have seen this change the way the image is handled.

background-position:50% 50%;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.