Bug generateVisualContent + background-color + rgba/opacity seems to render twice

Attempting to implement an element with skewed shape using generateVisualContent, everything worked fine, until I tried to use alpha for color.

My code:

Code (CSharp):

1. private void OnGenerateVisualContent(MeshGenerationContext mgc)
2. {
3.     var painter = mgc.painter2D;
4.     var slant = _slanted ? 5f : 0f;
5.    
6.     painter.fillColor = resolvedStyle.backgroundColor;
7.  
8.     var topLeft     = new Vector2(paddingRect.x, paddingRect.y);
9.     var topRight    = new Vector2(paddingRect.x + paddingRect.width + slant, paddingRect.y);
10.     var bottomRight = new Vector2(paddingRect.x + paddingRect.width, paddingRect.y + paddingRect.height);
11.     var bottomLeft = new Vector2(paddingRect.x - slant, paddingRect.y + paddingRect.height);
12.    
13.     painter.BeginPath();
14.     painter.MoveTo(topLeft);
15.     painter.LineTo(topRight);
16.     painter.LineTo(bottomRight);
17.     painter.LineTo(bottomLeft);
18.     painter.ClosePath();
19.     painter.Fill();
20. }

Generates this kind of button, when using no transparency.


But, if I am to use transparency on the element, like opacity or rgba for background color, this is what's getting rendered:


As can be seen, the square background seems to render alongside generateVisualContent resulting in an overlay effect and color mismatch.

Is this expected?

 

Changing my code to only render "adornments":

Code (CSharp):

1. private void OnGenerateVisualContent(MeshGenerationContext mgc)
2. {
3.     var painter = mgc.painter2D;
4.     var slant = _slanted ? 5f : 0f;
5.    
6.     painter.fillColor = resolvedStyle.backgroundColor;
7.    
8.     var topLeft     = new Vector2(paddingRect.x, paddingRect.y);
9.     var topRight    = new Vector2(paddingRect.x + paddingRect.width, paddingRect.y);
10.     var topRightSkew    = new Vector2(paddingRect.x + paddingRect.width + slant, paddingRect.y);
11.     var bottomRight = new Vector2(paddingRect.x + paddingRect.width, paddingRect.y + paddingRect.height);
12.     var bottomLeft  = new Vector2(paddingRect.x, paddingRect.y + paddingRect.height);
13.     var bottomLeftSkew = new Vector2(paddingRect.x - slant, paddingRect.y + paddingRect.height);
14.    
15.     // Left slant.
16.     painter.BeginPath();
17.     painter.MoveTo(topLeft);
18.     painter.LineTo(bottomLeft);
19.     painter.LineTo(bottomLeftSkew);
20.     painter.ClosePath();
21.     painter.Fill();
22.    
23.     // Right slant.
24.     painter.BeginPath();
25.     painter.MoveTo(topRight);
26.     painter.LineTo(topRightSkew);
27.     painter.LineTo(bottomRight);
28.     painter.ClosePath();
29.     painter.Fill();
30. }

Produces the expected outcome:

 

Maybe it's not a bug, but the documentation doesn't state anything of sorts that would imply that this would generate geometry on top of default one.

Neither of these, at least, signify that:
- https://docs.unity3d.com/ScriptReference/UIElements.VisualElement-generateVisualContent.html
- https://docs.unity3d.com/ScriptReference/UIElements.MeshGenerationContext.html