[iOS] Fix Gray Line Appears on the Right Side of GraphicsView with Decimal WidthRequest

[devanathan-vaithiyanathan]

Issue Details

GraphicsView has its Width or Height set to a decimal value (e.g., 0.25 or 0.75) and a background is applied, an unwanted gray line appears on the view on the iOS platform.

RootCause

Background color rendering inconsistency in GraphicsView occurs due to incorrect boundary value. causing visible lines at view edges when using decimal width and height dimensions.

Description of Changes:

When providing a graphics view size with decimal values like XX.25, iOS converts the decimal part to a value like XX.3333331, which causes a gray line to appear due to rounding inconsistencies.
In the graphics view, the background color is currently applied directly to the View element. However, it is unnecessary to apply the background color to the entire View element. Instead, the background color should be applied only to the drawable area.
To address this issue, we stopped mapping the background color to the View element and instead mapped it to the graphics view. Additionally, whenever the background color changes, we invalidate the drawable to redraw the drawable area with the updated color.

Issues Fixed

Fixes #25502

Tested the behaviour in the following platforms

• Android
• Windows
• iOS
• Mac

Output Screenshot

Before	After

[dotnet-policy-service]

Hey there @devanathan-vaithiyanathan! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[kubaflo]

The strange thing about this bug is that it is only applicable for the graphics view with decimal values XX.25 It happens because iOS converts the decimal part to something line XX.3333331. I wonder if it is worth wrapping the GraphicsView inside a wrapper view only for this case. Moreover, if you use a transparent background instead of a white color then the problem disappears. And the line is invisible with any color different than white. Maybe there's a better fix for this🤔

@mattleibow what do you think?

[devanathan-vaithiyanathan]

The strange thing about this bug is that it is only applicable for the graphics view with decimal values XX.25 It happens because iOS converts the decimal part to something line XX.3333331. I wonder if it is worth wrapping the GraphicsView inside a wrapper view only for this case. Moreover, if you use a transparent background instead of a white color then the problem disappears. And the line is invisible with any color different than white. Maybe there's a better fix for this🤔

@mattleibow what do you think?

@kubaflo When providing a graphics view size with decimal values like XX.25, iOS converts the decimal part to a value like XX.3333331, which causes a gray line to appear due to rounding inconsistencies.
In the graphics view, the background color is currently applied directly to the View element. However, it is unnecessary to apply the background color to the entire View element. Instead, the background color should be applied only to the drawable area.
To address this issue, we stopped mapping the background color to the View element and instead mapped it to the graphics view. Additionally, whenever the background color changes, we invalidate the drawable to redraw the drawable area with the updated color.

The Unwanted - Line is not limited to a white background but occurs with any background color applied, except for transparent.

[jfversluis]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

/rebase

[jfversluis]

Failing test unrelated