Misalignment of shape objects

I've noticed this 'bug' for perhaps many years, so I don't think it's unique to version 20 beta, or even to version 19.

When one creates two identical shapes (same length, same height), e.g. rectangles -- and place them side by side (i.e. same y-axis value) -- there is an ever so slight misalignment.

I tried to adjust the y axis of one of the shapes by an increment of 0.00053 (approximately) and, to my eye, that seems to bring them into alignment.

In the screen shot below, the magenta shape is a fraction higher than the blue shape, even though both are identical and have the same y axis value.

Initially I assumed the misalignment was in the Edit/Fusion tab viewers. But I got around to doing some actual renders to test them, and the slight misalignment I can see them in the rendered videos.

As said, I've noticed this issue for many years, and always assumed that the misalignment was either me imagining it, or that it would not be visible in the final render. But today's tests showed me that it is visible in the final render.

I did this test with shapes created by masks, and using the sShape system in both versions 19 and 20 latest versions, and the said misalignment is evident to me in both masks and sShapes.

SCR-20250425-ptvu.png (291.54 KiB) Viewed 305 times

I've also seen this 'bug' when creating circular shapes, such as when making pie-charts in Fusion.

Here is the code for the shapes created with masks:

Code: Select all

{
   Tools = ordered() {
      Background3 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle2",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 124, },
            Width = Input { Value = 3840, },
            Height = Input { Value = 2160, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 0.250980392156863, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { 1705, -82.5 } },
      },
      Background1 = Background {
         Inputs = {
            GlobalOut = Input { Value = 124, },
            Width = Input { Value = 3840, },
            Height = Input { Value = 2160, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftAlpha = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { 1539.23, 16.5 } },
      },
      Rectangle2 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 3840, },
            MaskHeight = Input { Value = 2160, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.468, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { 1705, -148.5 } },
      },
      Rectangle3 = RectangleMask {
         CtrlWZoom = false,
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 3840, },
            MaskHeight = Input { Value = 2160, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.553, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { 1815, -148.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge5",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background2",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { 1815, 16.5 } },
      },
      MediaOut1 = MediaOut {
         Inputs = {
            Index = Input { Value = "0", },
            Input = Input {
               SourceOp = "Merge1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1980, 16.5 } },
      },
      Background2 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle3",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 124, },
            Width = Input { Value = 3840, },
            Height = Input { Value = 2160, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftGreen = Input { Value = 0.992156862745098, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { 1815, -82.5 } },
      },
      Merge5 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background1",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background3",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { 1705, 16.5 } },
      }
   },
   ActiveTool = "Rectangle3"
}

Here is the code for the shapes created with sShapes:

Code: Select all

{
   Tools = ordered() {
      sRectangle1 = sRectangle {
         Inputs = {
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.025, },
            Green = Input { Value = 0.250980392156863, }
         },
         ViewInfo = OperatorInfo { Pos = { 1540, -49.5 } },
      },
      sTransform1 = sTransform {
         Inputs = {
            XOffset = Input { Value = -0.101, },
            Input = Input {
               SourceOp = "sRectangle1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1540, 16.5 } },
      },
      sMerge1 = sMerge {
         Inputs = {
            Input1 = Input {
               SourceOp = "sTransform1",
               Source = "Output",
            },
            Input2 = Input {
               SourceOp = "sTransform2",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1650, 82.5 } },
      },
      sRender1 = sRender {
         Inputs = {
            GlobalOut = Input { Value = 124, },
            Width = Input { Value = 3840, },
            Height = Input { Value = 2160, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Input = Input {
               SourceOp = "sMerge1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1595, 115.5 } },
      },
      sTransform2 = sTransform {
         Inputs = {
            XOffset = Input { Value = 0.072, },
            Input = Input {
               SourceOp = "sRectangle1_1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1705, 16.5 } },
      },
      sRectangle1_1 = sRectangle {
         Inputs = {
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.025, },
            Red = Input { Value = 0, },
            Green = Input { Value = 0.992156862745098, }
         },
         ViewInfo = OperatorInfo { Pos = { 1705, -49.5 } },
      },
      MediaOut1 = MediaOut {
         CtrlWZoom = false,
         Inputs = {
            Index = Input { Value = "0", },
            Input = Input {
               SourceOp = "Merge6",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1870, 181.5 } },
      },
      Merge6 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background4",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "sRender1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { 1595, 181.5 } },
      },
      Background4 = Background {
         Inputs = {
            GlobalOut = Input { Value = 124, },
            Width = Input { Value = 3840, },
            Height = Input { Value = 2160, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, }
         },
         ViewInfo = OperatorInfo { Pos = { 1375, 181.5 } },
      }
   },
   ActiveTool = "MediaOut1"
}

I don't see any misalignment problems myself. And I'm not sure what you are doing vs what you are expecting to get. All seems normal to me. The only thing I can think of is that colors are playing tricks on you. You can easily check if this is the case, if you for example make the two rectangle shapes of the same color. Make it white for example. In shape example, before the sRender add sChangeStyle and change it to white. Do you still see misalignment?

Code: Select all

{
   Tools = ordered() {
      sRectangle1_1 = sRectangle {
         Inputs = {
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.025, },
            Red = Input { Value = 0, },
            Green = Input { Value = 0.992156862745098, }
         },
         ViewInfo = OperatorInfo { Pos = { 749.398, -77.8908 } },
      },
      sMerge1 = sMerge {
         Inputs = {
            Input1 = Input {
               SourceOp = "sTransform1",
               Source = "Output",
            },
            Input2 = Input {
               SourceOp = "sTransform2",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 622.427, 17.2505 } },
      },
      sTransform2 = sTransform {
         Inputs = {
            XOffset = Input { Value = 0.072, },
            Input = Input {
               SourceOp = "sRectangle1_1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 749.398, -10.1766 } },
      },
      sChangeStyle1 = sChangeStyle {
         Inputs = {
            Input = Input {
               SourceOp = "sMerge1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 622.427, 51.4159 } },
      },
      sRectangle1 = sRectangle {
         Inputs = {
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.025, },
            Green = Input { Value = 0.250980392156863, }
         },
         ViewInfo = OperatorInfo { Pos = { 475.975, -72.7482 } },
      },
      sTransform1 = sTransform {
         Inputs = {
            XOffset = Input { Value = -0.101, },
            Input = Input {
               SourceOp = "sRectangle1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 475.975, -6.74824 } },
      },
      sRender1 = sRender {
         Inputs = {
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Input = Input {
               SourceOp = "sChangeStyle1",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 622.427, 92.1298 } },
      },
      Background4 = Background {
         Inputs = {
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, }
         },
         ViewInfo = OperatorInfo { Pos = { 419.398, 142.824 } },
      },
      Merge6 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background4",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "sRender1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { 622.427, 142.824 } },
      }
   }
}

You can do the same with non shape system. Make the duplicate of the nodes you used and make the background nodes all white. Now use switch so you can see easily between the two examples. Keep your viewer zoom and position the same and use switch. Do you see the misalignment in all white shapes?

Code: Select all

{
   Tools = ordered() {
      Background1_2 = Background {
         Inputs = {
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftAlpha = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -507.581, 436.964 } },
      },
      Rectangle3_1 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.553, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { -609.195, 487.25 } },
      },
      Rectangle2_1 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.468, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { -719.195, 487.25 } },
      },
      Background3 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle2",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 0.250980392156863, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { -294.67, 365.391 } },
      },
      Rectangle2 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.468, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { -294.67, 271.964 } },
      },
      Merge5 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background1_2",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background3",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -294.67, 436.964 } },
      },
      Background3_1 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle2_1",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { -719.195, 580.677 } },
      },
      Background2_1 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle3_1",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { -609.195, 580.677 } },
      },
      Switch1 = Switch {
         CtrlWZoom = false,
         Inputs = {
            Name0 = Input { Value = "Color", },
            Input0 = Input {
               SourceOp = "Merge1_2",
               Source = "Output",
            },
            Name1 = Input { Value = "All White", },
            Input1 = Input {
               SourceOp = "Merge1_3",
               Source = "Output",
            }
         },
         ViewInfo = OperatorInfo { Pos = { -184.67, 652.25 } },
         Colors = { TileColor = { R = 0.572549019607843, G = 0.572549019607843, B = 0.572549019607843 }, }
      },
      Merge1_3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge5_1",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background2_1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -609.195, 652.25 } },
      },
      Merge5_1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background1_3",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background3_1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -719.195, 652.25 } },
      },
      Merge1_2 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge5",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background2",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -184.67, 436.964 } },
      },
      Background1_3 = Background {
         Inputs = {
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftAlpha = Input { Value = 0, }
         },
         ViewInfo = OperatorInfo { Pos = { -932.105, 652.25 } },
      },
      Background2 = Background {
         Inputs = {
            EffectMask = Input {
               SourceOp = "Rectangle3",
               Source = "Mask",
            },
            GlobalOut = Input { Value = 500, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            UseFrameFormatSettings = Input { Value = 1, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftGreen = Input { Value = 0.992156862745098, },
            TopLeftBlue = Input { Value = 1, }
         },
         ViewInfo = OperatorInfo { Pos = { -184.67, 365.391 } },
      },
      Rectangle3 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            UseFrameFormatSettings = Input { Value = 1, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.553, 0.5 }, },
            Width = Input { Value = 0.25, },
            Height = Input { Value = 0.05, }
         },
         ViewInfo = OperatorInfo { Pos = { -184.67, 271.964 } },
      }
   }
}

Color and relations between neighboring colors can play significant tricks on the eyes. There is a whole field on illusions made with this.

https://medium.com/sketch-app-sources/c ... ba29421426

https://www.tiktok.com/@jayalders/video ... 5204354346

https://www.provideocoalition.com/5-col ... liar-with/
........................

In your daily work, the other possibilities for possible issues could be cause if you you have broken concatenation in your workflow and caused double processing leading to degradation of the image.

Depending on the kind of work you do, also worth noting is that you may want to have "smooth resize" option turned off or on. For shapes and motion graphics, you probably want to have smooth resize turned off. For some other types of work, VFX for example you are likley want to keep it on, and turn it off as needed. It is on by default. It can be found in the three dot menu of the viewer.

Smooth Resize: This option uses a smoother bilinear interpolated resizing method when zooming into an image in the viewer; otherwise, scaling uses the nearest neighbor method and shows noticeable aliasing artifacts. However, this is more useful when you zoom in at a pixel level since there is no interpolation.

make the two rectangle shapes of the same color. Make it white for example.

I take your point. When I make both of rectangles white in color, I do not see a misalignment.

I accept your premise that my eyes are playing tricks due to the juxtaposition of the colors.

It's not entirely wrong though. There is something wacky in how it's interpolating subpixel dithering.
If the color is the same on both objects, there's no subpixel alpha dithering and it butts up like expected.

Same Color

Same Color

Screenshot 2025-04-25 102353.jpg (452.21 KiB) Viewed 224 times

If you switch the color, there is an alpha dither added that creates a line of transparency. In these examples I turned off Smooth Resize to give a cleaner example. Both images are at the same zoom, I just turned on the selection so it can show the object location.

Different Color

Different Color

Screenshot 2025-04-25 102026.jpg (471.67 KiB) Viewed 224 times

I'm guessing this could be a math rounding error, where objects are a fraction of a percent wrong... but to the point where it's not going to matter in the real world, especially if we're going down to 3 decimals.

... to the point where it's not going to matter in the real world, especially if we're going down to 3 decimals.

But I'm using such diagrams in explainer videos where the audience's focus is looking at the diagram. Hence, I was bothered that I could 'perceive' a misalignment, and that the person seeing my video might perceive it too.