Nativescript: iOS 13 & Nativescript 6.1 Button "border-width" CSS Property Broken [Angular]

[kdagnan]

Environment

  "dependencies": {
    "@angular/animations": "8.2.1",
    "@angular/common": "8.2.1",
    "@angular/compiler": "8.2.1",
    "@angular/core": "8.2.1",
    "@angular/forms": "8.2.1",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "8.2.1",
    "@angular/platform-browser-dynamic": "8.2.1",
    "@angular/router": "8.2.1",
    "@nstudio/nativescript-camera-plus": "^2.2.6",
    "ajv": "6.10.2",
    "copy-webpack-plugin": "5.0.4",
    "nativescript-angular": "8.2.1",
    "nativescript-app-sync": "1.0.6",
    "nativescript-barcodescanner": "^3.2.2",
    "nativescript-camera": "^4.5.0",
    "nativescript-facebook-account-kit": "^1.2.2",
    "nativescript-http-formdata": "^1.7.0",
    "nativescript-imagecropper": "^1.0.6",
    "nativescript-plugin-firebase": "^9.1.1",
    "nativescript-stripe": "^5.4.3",
    "nativescript-theme-core": "^2.0.5",
    "nativescript-ui-dataform": "^5.0.0",
    "nativescript-ui-sidedrawer": "^7.0.0",
    "parse-usdl": "git+https://github.com/kdagnan/parse-usdl.git",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.3.3",
    "tns-core-modules": "^6.0.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "8.2.1",
    "@nativescript/schematics": "^0.6.0",
    "@ngtools/webpack": "8.2.1",
    "nativescript-dev-webpack": "1.2.0",
    "tns-platform-declarations": "6.0.6",
    "typescript": "3.4.5"
  },

iOS 13.1

Describe the bug
In CSS the "border-width" property seems to be broken (Tested on Buttons only). It worked prior to the update to 6.1

Example Code:

<Button class="btn btn-primary btn-outline" text="{{ cat.name }}"(tap)="navigateToCat(cat.id)" width="40%"></Button>

.btn-outline {
    background-color: transparent;
    color: #ffd966;
    border-width: 1px;
    border-color: #ffd966;
}

If I add the "borderWidth" property to the Button, then it works but not with CSS :(

[kdagnan]

Also using the compact method for border:
border: 1px solid black doesn't work either.

However, using the separate properties for each side (left/right, top/bottom) (ie border-top-width) will work.

[tsonevn]

Hi @kdagnan,
I tested the border properties on my side on iOS 13, however, I was unable to recreate an issue with them. I am attaching a link to my test project. Please review it and make the needed changes, which will help us to recreate the problem.

[dlcole]

I'm seeing this same problem ever since upgrading to theme 2.0 and using compat mode, namely,

@import '~nativescript-theme-core/core.compat';
@import '~nativescript-theme-core/blue.compat';

Specifying individual border widths (top/right/bottom/left) in the scss has no effect. Adding an inline borderWidth="2" does work, but I really don't want to hard-code an in-line style attribute in probably hundreds of buttons across my app.

I just upgraded to all current levels ({N} 6.5) and the problem persists.

[dlcole]

After running into all kinds of weirdness with theme 2.0 I reverted to 1.0.6 and all my formatting and visibility issues have resolved. That suggests the button border problem is with the theme plugin, not iOS.

[igorkra]

This styles helped me

.btn.btn-outline {
    border-top-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    border-bottom-width: 1;
}