Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28110

iOS: View with border radius overlaps the border at the corners

    Details

    • Type: Bug
    • Status: Closed
    • Priority: None
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Release 9.2.0, Release 9.1.1
    • Component/s: iOS
    • Labels:
    • Environment:

      Mac OS: 10.15.4
      SDK: 9.0.3.GA, 9.1.0.GA
      Appc CLI: 8.1.0
      JDK: 11.0.4
      Node: 10.17.0
      Studio: 6.0.0.202005141803
      Xcode: 12.0 Beta6
      iOS sim 13.5

    • Sprint:
      2020 Sprint 18

      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

        1. 9.0.3.GA.png
          154 kB
          Satyam Sekhri
        2. 9.1.0.GA.png
          178 kB
          Satyam Sekhri

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                ssekhri Satyam Sekhri
                Reviewer:
                Christopher Williams
                Tester:
                Satyam Sekhri
              • Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration