Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Box shadow iOS] combining linear-gradient background, border-radius and box-shadow #9869

Closed
@res0

Description

@res0

Issue Description

When combining box-shadow, border-radius and linear-gradient as a background on iOS, it shows the element as a rectangle with shadow. When the background is a solid color, it works normally.

Box-shadow + border-radius + linear-gradient background:
Simulator Screen Shot - iPhone 13 Pro Max - 2022-04-13 at 11 17 07

Box-shadow + border-radius + solid color background:
Simulator Screen Shot - iPhone 13 Pro Max - 2022-04-13 at 11 17 38

Reproduction

style an element like this on iOS:

element {
    background: linear-gradient(#fafafa, #ccc);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 24;
}

Relevant log output (if applicable)

No response

Environment

OS: macOS 12.1
CPU: (8) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 14.18.2
npm: 8.1.4
nativescript: 8.2.2

# android
java: 11.0.14
ndk: Not Found
apis: 28, 29, 30, 31
build_tools: 30.0.2, 30.0.3
system_images: 
  - android-23 | Google APIs Intel x86 Atom
  - android-25 | Google APIs ARM 64 v8a
  - android-29 | Google APIs ARM 64 v8a
  - android-30 | Google Play ARM 64 v8a
  - android-31 | Google APIs ARM 64 v8a

# ios
xcode: 13.2.1/13C100
cocoapods: 1.11.2
python: 2.7.18
python3: 3.8.9
ruby: 2.6.8
platforms: 
  - DriverKit 21.2
  - iOS 15.2
  - macOS 12.1
  - tvOS 15.2
  - watchOS 8.3

Dependencies

"dependencies": {
  "@nativescript/core": "~8.2.0",
  "@nativescript/theme": "~3.0.2",
  "axios": "^0.26.1",
  "lodash": "^4.17.15",
  "moment": "^2.26.0",
  "nativescript-vue": "~2.9.1",
  "vuex": "3.1.2"
},
"devDependencies": {
  "@nativescript/android": "~8.2.0",
  "@nativescript/ios": "~8.2.0",
  "@nativescript/webpack": "~5.0.0",
  "@types/jest": "^26.0.7",
  "@types/node": "^14.0.27",
  "@vue/devtools": "^5.3.3",
  "chalk": "^4.1.0",
  "dotenv": "^8.2.0",
  "husky": "^4.2.5",
  "jest": "^26.1.0",
  "lazy": "1.0.11",
  "nativescript-vue-devtools": "^1.4.0",
  "nativescript-vue-template-compiler": "~2.9.0",
  "sass": "~1.39.0",
  "source-map": "^0.7.3",
  "superagent": "^6.1.0",
  "ts-jest": "^26.1.4",
  "tslib": "^2.1.0",
  "typescript": "~4.3.5",
  "xml-js": "^1.6.11"
}

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions