question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Elements are rendered in the wrong order in 0.10.6

See original GitHub issue

Describe the bug I have encountered a weird bug that, in the right conditions, causes elements to be drawn in the wrong order (so that, if there are overlapping controls, the ones that should be behind are instead drawn in front of the others), see screenshots.

To Reproduce Create a new Avalonia application with a Window with the following content:

<Viewbox>
      <Canvas Width="140" Height="60">
        <Path Fill="Red" Data="M 30, 15 L 22.5, 27.99038105676658 L 7.5000000000000036, 27.99038105676658 L 0, 15.000000000000002 L 7.499999999999993, 2.0096189432334235 L 22.5, 2.0096189432334217Z" />
        <Path Fill="Green" Data="M 45, 15 L 37.5, 27.99038105676658 L 22.500000000000004, 27.99038105676658 L 15, 15.000000000000002 L 22.499999999999993, 2.0096189432334235 L 37.5, 2.0096189432334217Z" />
        <Path Fill="Blue" Data="M 37.5, 15 L 30, 27.99038105676658 L 15.000000000000004, 27.99038105676658 L 7.5, 15.000000000000002 L 14.999999999999993, 2.0096189432334235 L 30, 2.0096189432334217Z" />

        <Path Fill="Red" Data="M 75, 15 L 67.5, 27.99038105676658 L 52.5, 27.99038105676658 L 45, 15.000000000000002 L 52.49999999999999, 2.0096189432334235 L 67.5, 2.0096189432334217Z" />
        <Path Fill="Green" Data="M 90, 15 L 82.5, 27.99038105676658 L 67.5, 27.99038105676658 L 60, 15.000000000000002 L 67.5, 2.0096189432334235 L 82.5, 2.0096189432334217Z" />
        <Path Fill="Blue" Data="M 82.5, 15 L 75, 27.99038105676658 L 60, 27.99038105676658 L 52.5, 15.000000000000002 L 59.99999999999999, 2.0096189432334235 L 75, 2.0096189432334217Z" />

        <Path Fill="Red" Data="M 120, 15 L 112.5, 27.99038105676658 L 97.5, 27.99038105676658 L 90, 15.000000000000002 L 97.5, 2.0096189432334235 L 112.5, 2.0096189432334217Z" />
        <Path Fill="Green" Data="M 135, 15 L 127.5, 27.99038105676658 L 112.5, 27.99038105676658 L 105, 15.000000000000002 L 112.5, 2.0096189432334235 L 127.5, 2.0096189432334217Z" />
        <Path Fill="Blue" Data="M 127.5, 15 L 120, 27.99038105676658 L 105, 27.99038105676658 L 97.5, 15.000000000000002 L 105, 2.0096189432334235 L 120, 2.0096189432334217Z" />

        <Path Fill="Red" Data="M 30, 45 L 22.5, 57.99038105676658 L 7.5000000000000036, 57.99038105676658 L 0, 45 L 7.499999999999993, 32.00961894323342 L 22.5, 32.00961894323342Z" />
        <Path Fill="Green" Data="M 45, 45 L 37.5, 57.99038105676658 L 22.500000000000004, 57.99038105676658 L 15, 45 L 22.499999999999993, 32.00961894323342 L 37.5, 32.00961894323342Z" />
        <Path Fill="Blue" Data="M 37.5, 45 L 30, 57.99038105676658 L 15.000000000000004, 57.99038105676658 L 7.5, 45 L 14.999999999999993, 32.00961894323342 L 30, 32.00961894323342Z" />

        <Path Fill="Red" Data="M 75, 45 L 67.5, 57.99038105676658 L 52.5, 57.99038105676658 L 45, 45 L 52.49999999999999, 32.00961894323342 L 67.5, 32.00961894323342Z" />
        <Path Fill="Green" Data="M 90, 45 L 82.5, 57.99038105676658 L 67.5, 57.99038105676658 L 60, 45 L 67.5, 32.00961894323342 L 82.5, 32.00961894323342Z" />
        <Path Fill="Blue" Data="M 82.5, 45 L 75, 57.99038105676658 L 60, 57.99038105676658 L 52.5, 45 L 59.99999999999999, 32.00961894323342 L 75, 32.00961894323342Z" />

        <Path Fill="Red" Data="M 120, 45 L 112.5, 57.99038105676658 L 97.5, 57.99038105676658 L 90, 45 L 97.5, 32.00961894323342 L 112.5, 32.00961894323342Z" />
        <Path Fill="Green" Data="M 135, 45 L 127.5, 57.99038105676658 L 112.5, 57.99038105676658 L 105, 45 L 112.5, 32.00961894323342 L 127.5, 32.00961894323342Z" />
        <Path Fill="Blue" Data="M 127.5, 45 L 120, 57.99038105676658 L 105, 57.99038105676658 L 97.5, 45 L 105, 32.00961894323342 L 120, 32.00961894323342Z" />
        
      </Canvas>
    </Viewbox>

Expected behavior Each path represents a hexagon; in all “triplets”, the hexagons are partially overlapping, and the blue hexagon should be over the green hexagon, which is over the red hexagon. The preview correctly shows this, however, when the application is executed, the order for some of the triplets is wrong.

Screenshots

Result when running the program: image

Result in the preview (correct behaviour): image

Desktop (please complete the following information):

  • OS: Tested on Windows, Ubuntu 20.10 and macOS (the bug happens in all three)
  • Version: Bug occurs with version 0.10.6; works fine with 0.10.3-0.10.5

Additional context There seems to be some dependency on the number of controls: removing any two paths from the example above recovers the correct behaviour.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
MarchingCubecommented, Jul 19, 2021

This problem is caused by an unstable sort in the deferred renderer actually. We need to change to an another implementation since Array.Sort is problematic in this case.

1reaction
Gillibaldcommented, Jul 14, 2021

No it is not. This is definitely a bug inside the DeferredRenderer that needs to be fixed. Thanks for helping.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is React rendering my DOM elements in the wrong ...
When I delete items from the shopping cart, the order of the items displayed changes even though the original array is not mutated....
Read more >
Getting this error in my game whenever i try to enable JEI ...
This crash is caused by OptiFine, not by JEI, and there's nothing that can be done. OptiFine for 1.14.4 with Forge is a...
Read more >
Introduction — re-frame 0.10.6
A re-frame event is a vector and, in this case, it has 2 elements: [:delete-item 2486] (where 2486 is the made-up id for...
Read more >
September Builds 0.10.6
There's no point in having translated text if the game is unable to render it properly. So a general rework of SDF fonts...
Read more >
Upgrade Guides | Nomad
The upgrading page covers the details of doing a standard upgrade. However, specific versions of Nomad may have more details provided for their...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found