[TIMOB-28110] iOS: View with border radius overlaps the border at the corners
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | None |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2020-09-11T15:24:40.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 9.2.0, Release 9.1.1 |
| Components | iOS |
| Labels | regression |
| Reporter | Satyam Sekhri |
| Assignee | Vijay Singh |
| Created | 2020-09-03T21:29:22.000+0000 |
| Updated | 2020-09-11T15:24:40.000+0000 |
Description
Customer Issue: https://axway.my.salesforce.com/5003V000006kEu4
A view having border radius defined has issues with the contents of the view overlapping the borders at the corners of the view.
This issue is a regression introduced in 9.1.0.GA. It works fine in 9.0.3.GA
Steps to Reproduce:
1. Create an app with code below
2. Run on iOS sim/device
Actual Result:
The view borders do not show up correctly. Check the screenshot for 9.0.3.GA and 9.1.0.GA
var testWin = Ti.UI.createWindow({});
const roundedLabel = Ti.UI.createLabel({
height:100,
width:200,
borderRadius: 50,
borderWidth: 5,
borderColor: 'blue',
backgroundColor: 'red',
color: 'blue',
text: 'Rounded Label',
font: {
fontSize: 20,
fontWeight: 'bold'
},
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
top:50
})
const circleImage = Ti.UI.createImageView({
height:100,
width:100,
borderRadius:20,
borderColor:'red',
borderWidth:5,
image:'https://www.tonytextures.com/free-texture-gallery/sky/Sky_Clouds_Photo_Texture_A_P1119218.JPG',
top:200
})
let roundedViewWithLabel = Ti.UI.createLabel({
height:100,
width:200,
borderRadius: 50,
borderWidth: 5,
borderColor: 'blue',
backgroundColor: 'white',
top:400
})
roundedViewWithLabel.add(Ti.UI.createLabel({
width:Ti.UI.FILL,
height:Ti.UI.FILL,
text: 'Rounded View With Label',
font: {
fontSize: 20,
fontWeight: 'bold'
},
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color: 'blue',
}));
testWin.add(roundedLabel);
testWin.add(circleImage);
testWin.add(roundedViewWithLabel);
testWin.open();
Attachments
| File | Date | Size |
|---|---|---|
| 9.0.3.GA.png | 2020-09-03T21:23:04.000+0000 | 157308 |
| 9.1.0.GA.png | 2020-09-03T21:23:04.000+0000 | 182579 |
PR - https://github.com/appcelerator/titanium_mobile/pull/12005 Note - This fixes TIMOB-28103 as well.
Waiting for Jenkins build
Can this fix be backported to 9_1_X ??
merged to master, backport PR to 9_1_X merged, manually cherry-picked to 9_3_X
Closing ticket. Fix verified in SDK version 9.2.0.v20200911051822, and 9.3.0.v20200911052140, 9.1.1.v20200910063052. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/12005