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:
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.
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.