Button border-width sizing not matching

Bug Report

Ionic version: [x] 4.x

Current behavior: If the ion-button’s fill is set to outline, the border-width is set to 2, while if it is set to fill, the width is 1 or 0 depending on which border. If the style is changed at runtime, the size of the button will change, causing a layout ‘wiggle’

Expected behavior: The border-width’s should match.

Steps to reproduce: Create two buttons, one set to outline and one set to fill. Have the same button text. Measure the width. The heights appear to be equal.

Related code:

Other information: https://ionic-worldwide.slack.com/archives/C03AJVAJT/p1556736362018500

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.14.2 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[chrisgriffith]

Original Slack Question: https://ionic-worldwide.slack.com/archives/C03AJVAJT/p1556734130017800 Here is the thread:

jtth [11:08 AM] have i lost my mind or is the <ion-button fill="outline"> the exact outline-width wider than fill="solid"

jphambleton [11:28 AM] Like stroke is aligned to outer?

jtth [11:46 AM] yeah it’s like a pixel or two bigger; i toggle between the fill states to indicate toggled state on a screen and the button size changes ever so slightly and it just doesn’t make sense why that would be something explicitly decided upon

jphambleton [1:20 PM] May be inherited from another element. Might just want to affect the global sheets for that state specifically.

mdlallemont [1:45 PM] @jtth I’m running into the same issue. It would be great if they were consistent or at least give us a good reference doc for how to override the styles for that.

chrisgriffith [2:13 PM] @jtth @mdlallemont It is the border-width value that is different between the two styles. I have opened an issue on it.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!