Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28101] iOS: borderRadius issue with 9.1.0.GA

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2020-09-08T16:05:07.000+0000
Affected Version/sRelease 9.1.0
Fix Version/sRelease 9.2.0, Release 9.1.1
ComponentsiOS
Labelsregression
ReporterSebastian Klaus
AssigneeVijay Singh
Created2020-08-26T08:04:33.000+0000
Updated2020-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

FileDateSize
9.1.0.GA.png2020-08-26T08:02:15.000+000080915
9.1.0.v20200814072027.png2020-08-26T08:02:16.000+000080390

Comments

  1. Hans Knöchel 2020-08-26

    This is a regression from TIMOB-28095 and https://github.com/appcelerator/titanium_mobile/pull/11951/files
  2. Gary Mathews 2020-08-26

    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();
       
  3. Vijay Singh 2020-08-26

    [~gmathews] is right. It is due to using quadratic curves for bezier path. Looking in this.
  4. Vijay Singh 2020-08-26

    PR - https://github.com/appcelerator/titanium_mobile/pull/11969 Note- @QE Verify test cases mentioned in TIMOB-28095 and TIMOB-27305 as well.
  5. martin 2020-08-26

    Adding shadows (with viewShadowColor/viewShadowRadius/viewShadowOffset) to a view with borderRadius does not work anymore either. Worked in 9.1.0.v20200709073601.
  6. Vijay Singh 2020-08-26

    [~mj] Can you provide a small test case to reproduce it? Thanks!
  7. martin 2020-08-26

    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();
       
  8. Sebastian Klaus 2020-08-27

    Can confirm, that shadows on rounded borders are not shown
  9. Sebastian Klaus 2020-09-02

    When will the review be done approximately?
  10. Vijay Singh 2020-09-02

    [~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!
  11. Samir Mohammed 2020-09-03

    FR Passed, waiting on Jenkins build and 9_3_X port.
  12. Muhammad Ahmed Fahad 2020-09-04

    Is this already merged into 9_1_X? Still seeing the issue in 9.1.1.v20200903090820.
  13. Samir Mohammed 2020-09-04

    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?
  14. Muhammad Ahmed Fahad 2020-09-07

    I'm seeing the issue with the curves in the border not being displayed (on iOS only):
        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();
        
    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.
  15. Vijay Singh 2020-09-08

    [~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).
  16. Muhammad Ahmed Fahad 2020-09-08

    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
  17. Samir Mohammed 2020-09-08

JSON Source