1

Is there a way to disable background smoothing in Safari? I'm trying to make, for example, the tiled background like this:

div#dashed
{
  width: 10rem;
  height: 7rem;
  border: 1px solid #000;
  background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">

So, the background is like that: Diagonal dashes

And I expect the background to look like that (zoomed): Tiled background

But in Safari it looks like that: enter image description here Zoomed: enter image description here

So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?

BUKTOP
  • 867
  • 10
  • 22
  • Possible duplicate of [Disable antialising when scaling images](https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images) – McVenco Nov 16 '18 at 09:33
  • Looks like it's different problem. It works well in any browser except safari and nothing helps, including advices from that question – BUKTOP Nov 16 '18 at 09:37

2 Answers2

0

I think this is because your background was repeat. You can try it background-size:cover; background-repeat: no-repeat;

Setting size for your background-image.

J. Alice
  • 21
  • 2
0

As an alternative to using an image, you can achieve the same effect with pure CSS. 

.gradient {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>

You might want to fiddle around to reach the desired outcome.

A bit more info, and tips can be found on https://css-tricks.com/stripes-css/

McVenco
  • 1,011
  • 1
  • 17
  • 30
  • Sure, but just for that case. It’s just an example to illustrate problem, i am looking for the solution that would work with any image. At last it works in any browser except safari! ))) – BUKTOP Nov 16 '18 at 10:14
  • Strange thing is that `image-rendering: pixelated;` SHOULD work in Safari, in theory. I can't figure out yet why it doesn't work though... – McVenco Nov 16 '18 at 10:19
  • Just checked it once more - does not work, no effect at all. Probably it's for images only, not for background images – BUKTOP Nov 16 '18 at 11:04