Ionic-framework: bug: <ion-button> jagged border rendering issues

[sebastian-zarzycki-es]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When using with border and putting content inside (i.e. img), there is a weird border rendering issue - the content isn't transitioning smoothly to the border, but there is a fraction of pixel of background shown around.

Expected behavior:
The content should blend smoothly with border.

Steps to reproduce:
Create round ion-button with border and put content inside.

Related code:

  <div>ion-button</div>
  <ion-button fill="solid" shape="round" style="--padding-start: 0px; --padding-end: 0px; --border-radius: 50%; --border-style: solid; --border-width: 10px; --border-color: red; width: 100px; height: 100px; overflow: hidden;">
    <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" />
  </ion-button>

  <div>div</div>
  <div style="border-radius: 50%;border-style: solid; border-width: 10px; border-color: red; width: 100px; height: 100px; overflow: hidden;">
    <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" />
  </div>

Other information:
The result of the code above is:

Upper example showing current behaviour with a bug, while lower example showing the same approach with standard div. I would expect the outcome to be exactly the same.

This happens in all major browsers. Perhaps related to how Shadow DOM is handled with regards to slots? I couldn't find any workaround for this.

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/opt/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1001.0
   @angular-devkit/schematics    : 10.1.0
   @angular/cli                  : 10.1.0
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 9.0.0, browser, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 9 other plugins)

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.1.0) : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/rattkin/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.18.3 (/opt/local/bin/node)
   npm               : 6.14.8
   OS                : macOS Catalina
   Xcode             : Xcode 11.7 Build version 11E801a

[liamdebeasi]

Thanks for the issue. What browser/device are you testing this on?

[sebastian-zarzycki-es]

As stated, "This happens in all major browsers.". Tried FF, Chrome and Safari on desktop, haven't checked mobile ones yet.

[liamdebeasi]

I understand that, but I want to make sure I am reproducing the issue in the same way you are. What version of Chrome did you test this on?

[sebastian-zarzycki-es]

Chrome 85.0.4183.102, Safari 14 (15610.1.28.1.9), Firefox 80.0.1.

[sebastian-zarzycki-es]

Less visible on iOS 13 Simulator, but it's still there.

[liamdebeasi]

Thanks, I can reproduce this on Chrome. Looks like a rendering glitch, but I need to dig into this some more.

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The reason why you are seeing this difference is because ion-button still has a background applied to it. You can reproduce this same behavior by adding background: blue to the div that shows this issue not happening. To work around this, I recommend setting --background: transparent on the ion-button.

[sebastian-zarzycki-es]

Yep, that was exactly it! Sorry for the trouble. I was fighting this for good two hours and couldn't find a solution for some reason (I was looking mostly in shadow part).

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.