Repository navigation
[Box shadow iOS] combining linear-gradient background, border-radius and box-shadow #9869
Description
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:
Box-shadow + border-radius + solid color background:
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.3Dependencies
"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
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct
Activity
CatchABus commentedon Apr 25, 2022
@res0 What happens if you remove box shadow? Will radius apply to gradient element?
CatchABus commentedon Nov 14, 2022
@rigor789 I re-open this because the changes for this problem were reverted, so it's still open.
Should have mentioned issue on revert PR, I did it now.