Blurriness in all browsers

GoJS
1

Hello,

I have blurriness in all browsers. Including font, icons and more.

What can be the cause of it in GoJS?

Thanks!

2

My guess is that it is caused by antialiasing combined with objects that have non-integer size and/or position in the viewport.

Even if an object has a “nice” size and position in document/model coordinates, it can be drawn at non-integer pixel points due to non-integer Diagram.position or Diagram.scale.

3

Thanks Walter.

So how can I fix it?

4

Which of my suggestions did you try?

What are your reactions to my suggestion that antialiasing is hard to avoid when the user can scroll and zoom?

5

I didn’t understand your suggestions.

6

Could you provide a minimal example that exhibits the problem?

Here is an example that I have experimented with:

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { initialPosition: new go.Point(0, 0) });

    myDiagram.add(
      $(go.Part,
        { position: new go.Point(200, 200) },
        $(go.Shape, "LineH", { width: 100, height: 1 }),
        $(go.Shape, "LineV", { width: 1, height: 100 })
      ));

    myDiagram.add(
      $(go.Part,
        { position: new go.Point(210.5, 210.5) },
        $(go.Shape, "LineH", { width: 100, height: 1 }),
        $(go.Shape, "LineV", { width: 1, height: 100 })
      ));

If you position a node at values that are at 0.5 modulo 1, you’ll notice in this case that there is no need for anti-aliasing.

But try zooming in or out, and you will see that there will be anti-aliasing. Here’s the same diagram with Diagram.scale == 1.05: