Cardview radius working differently for big screen resolutions

[mpniewski]

I'm using cardview as background for company logos in my app and so I have them in a shape of a circle. Now I set height="80" width="80" radius="40" to get the desired shape and this solution, as expected, works well for small screen resolutions.

For bigger screens, the above parameters yield a square with rounded corners. The problem is fixed when radius is set to "80" (i.e. that produces a circle again) which is of course illogical.

After playing around with the parameters in css I think there might be an issue with correct px -> dpi conversions. Setting the size to 80 produces an element of size 160px but setting radius to 40 still produces a border-radius of 40px.

Anyone else getting the same issues?

[raw3]

Same issue. Currently going around this by multiplying the scale with the radius that I'm using:

<CardView [radius]="getRadius()"></CardView>

export class CardComponent {
  readonly cardRadiusDIP = 40;

  getRadius () {
    if (device.os === 'Android') {
      return this.cardRadiusDIP * screen.mainScreen.scale;
    }

    return this.cardRadiusDIP;
  }
}