[TIMOB-28101] iOS: borderRadius issue with 9.1.0.GA
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2020-09-08T16:05:07.000+0000 |
| Affected Version/s | Release 9.1.0 |
| Fix Version/s | Release 9.2.0, Release 9.1.1 |
| Components | iOS |
| Labels | regression |
| Reporter | Sebastian Klaus |
| Assignee | Vijay Singh |
| Created | 2020-08-26T08:04:33.000+0000 |
| Updated | 2020-09-08T16:05:07.000+0000 |
Description
The borderRadius behavior has changed from 9.1.0.v20200814072027 to 9.1.0.GA
Sample code
<Alloy>
<Window class="container">
<View backgroundColor="red" width="100" height="100" borderRadius="50"/>
</Window>
</Alloy>
Result as seen in simulator screenshots
Attachments
| File | Date | Size |
|---|---|---|
| 9.1.0.GA.png | 2020-08-26T08:02:15.000+0000 | 80915 |
| 9.1.0.v20200814072027.png | 2020-08-26T08:02:16.000+0000 | 80390 |
This is a regression from TIMOB-28095 and https://github.com/appcelerator/titanium_mobile/pull/11951/files
I believe this is due to using quadratic curves for the bezier path. The changes in PR [#11951](https://github.com/appcelerator/titanium_mobile/pull/11951/files) just exposed this issue as the issue could be reproduced with this test case before those changes:
const window = Ti.UI.createWindow({ backgroundColor: 'white' }); const view = Ti.UI.createView({ backgroundColor: 'red', width: 100, height: 100, borderRadius: '50 50 50 50' }); window.add(view); window.open();[~gmathews] is right. It is due to using quadratic curves for bezier path. Looking in this.
PR - https://github.com/appcelerator/titanium_mobile/pull/11969 Note- @QE Verify test cases mentioned in TIMOB-28095 and TIMOB-27305 as well.
Adding shadows (with viewShadowColor/viewShadowRadius/viewShadowOffset) to a view with borderRadius does not work anymore either. Worked in 9.1.0.v20200709073601.
[~mj] Can you provide a small test case to reproduce it? Thanks!
Running this will show no shadow:
var win=Ti.UI.createWindow({ backgroundColor:'#fff' }); win.add(Ti.UI.createView({ width:100, height:100, backgroundColor:'#777', viewShadowColor:'#d000', viewShadowRadius:20, viewShadowOffset:20, borderRadius:20 //remove this and the shadow will show... })); win.open();Can confirm, that shadows on rounded borders are not shown
When will the review be done approximately?
[~benutzername] Someone will review it soon. To note, it fixes the borderRadius issue only. For shadow related issue please follow TIMOB-28103. I am working on that and will create PR probably by tomorrow. Thanks!
FR Passed, waiting on Jenkins build and 9_3_X port.
Is this already merged into 9_1_X? Still seeing the issue in 9.1.1.v20200903090820.
Hey [~fahad86] The fix should be present in
9.1.1.v20200903090820*Note* this is a fix for borderRadius only. Do you have a sample test case where I can reproduce the issue you are seeing?I'm seeing the issue with the curves in the border not being displayed (on iOS only):
Maybe the border radius of the view is fixed, but the border itself seems to have breaks which can be seen when setting a border width.var window = Ti.UI.createWindow({ width: Ti.UI.FILL, height: Ti.UI.FILL, backgroundColor: 'white' }); window.add(Ti.UI.createView({ width: 100, height: 100, borderColor: "red", borderWidth: 1, borderRadius: 8 }); window.open();[~fahad86] Your test case is same as mentioned in TIMOB-28110. It is fixed in PR https://github.com/appcelerator/titanium_mobile/pull/12005 (not merged yet).
Thanks Vijay. Can TIMOB-28110 be included in 9.1.1.GA as there is already a pull request for this? Please backport to 9_1_X