[WASM] Material RadioButton checkmark is not correctly centered when display is scaled

ebariche commented 3 years ago

carldebilly commented 3 years ago

@ebariche On which browser did you get that? I can't reproduce on Chrome using http://gallery.platform.uno/ nor https://unogallery-wasm-staging.azurewebsites.net/

jeromelaban commented 3 years ago

I'm getting this as well on edge scaled 150%

agneszitte commented 2 years ago

Issue still happening on Edge scaled 150%

tested Gallery locally with latest Uno stable packages

Uno.UI 4.0.11 Uno.Material / Uno.Cupertino 1.2.0

cc @jeromelaban

Youssef1313 commented 1 year ago

As far as I can tell, the outer ellipse (which is actually a circle) is 20px, while the inner one is 10px. So it can be centered properly because 20px - 10px is even and hence can be divided by two.

With 150% scaling, the outer is 30px and the inner is 15px. This is not possible to be centered because 30px - 15px is 15px which is not even.

Note that the DOM elements are using the original dimensions and the browser here handles the scaling, ie, we don't set the ellipses to 30px and 15px ourselves. They are still 20px and 10px but the browser isn't able to center it with scaling.

I'm not sure how to approach this.

@carldebilly @dr1rrb Any ideas?

carldebilly commented 1 year ago

Note that the DOM elements are using the original dimensions and the browser here handles the scaling, ie, we don't set the ellipses to 30px and 15px ourselves. They are still 20px and 10px but the browser isn't able to center it with scaling.

I'm not sure how to approach this.

Modern browsers usually employ subpixel rendering, which essentially allows them to position elements using fractions of a pixel. This results in smoother graphics and text, especially at non-integer scaling factors. The consequence of this is that while the math might suggest an alignment problem, in practice, the elements can often be displayed smoothly without obvious visual discrepancies.

Since ellipses (and circles) have curving edges. When these curves are rendered, anti-aliasing naturally comes into play, smoothing out the edges. This means that minor misalignments due to subpixel rendering are often less noticeable on curves than on straight lines.

I would be very curious to actually reproduce the problem to check the CSS instructions. I'm pretty sure the reason will become obvious.

Youssef1313 commented 1 year ago

@carldebilly Here is a simplified HTML/CSS:

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div style="width: 20px; height: 20px;">
         <svg style="position: absolute; top: 0px; left: 0px; width: 20px; height: 20px;">
            <ellipse cx="10" cy="10" rx="9" ry="9" style="fill: rgba(255, 255, 255, 0); stroke-width: 2px; stroke: rgb(199, 191, 255); transform: matrix(1, 0, 0, 1, 0, 0);"></ellipse>
         </svg>
         <svg style="position: absolute; top: 5px; left: 5px; width: 10px; height: 10px;">
            <ellipse cx="5" cy="5" rx="5" ry="5" style="fill: rgb(199, 191, 255); transform: matrix(1, 0, 0, 1, 0, 0);"></ellipse>
         </svg>
      </div>
   </body>
</html>

carldebilly commented 1 year ago

I see the problem... but I have no clue how we can solve it since it appears there's a rounding occurring in the browser itself.

The application can fetch the devicePixelRatio, but I can't see how it could be possible to use it to fix the problem.

Youssef1313 commented 1 year ago

@carldebilly Combining both circles/ellipses in a single path should work in the simple scenario.

But:

Requires modifying the template on Uno.Themes side.
Makes things harder (impossible? 😕) to customize.

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div style="width: 20px; height: 20px;">
         <svg>
            <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"
         </svg>
      </div>
   </body>
</html>

carldebilly commented 1 year ago

Yes it would work but since that's the result of different shapes in XAML, the change need to be done there and it would be only a workaround for this control, the real problem not being addressed at all.

Arieldelossantos commented 1 year ago

After trying to find a workaround for this, apparently this is a browser issue on how it renders the controls on up/down scaling... i've saw that there're other similar open issues on Github related to the same problem with other languages like React and Html/CSS projects.

cc: @agneszitte

Youssef1313 commented 1 year ago

Found on Android as well: https://github.com/unoplatform/uno/issues/13465

unoplatform / uno

[WASM] Material RadioButton checkmark is not correctly centered when display is scaled #4510