[TIMOB-24238] Windows: borderRadius overflow doesn't work correctly

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Open
Resolution	Unresolved
Affected Version/s	Release 6.0.0
Fix Version/s	n/a
Components	Windows
Labels	n/a
Reporter	Ricardo Pereira
Assignee	Kota Iguchi
Created	2016-11-18T17:11:26.000+0000
Updated	2018-03-22T14:57:48.000+0000

Description

I've only tested in local app: appc run -p windows -T ws-local *test project attached* index.xml

<Alloy>
	<Window>
		<View id="view"/>
	</Window>
</Alloy>

index.tss

"#view":{
	width:200,
	height:200,
	backgroundColor:"blue",
	borderColor:"black",
	borderWidth:3,
	borderRadius:50
}

Attachments

File	Date	Size
border.png	2017-02-08T08:22:42.000+0000	9419
Windows Tests.zip	2016-11-18T17:11:25.000+0000	471859

Comments

Ricardo Pereira 2016-11-18

test project with 3 bugs: - touchEnabled - zIndex - borderRadius
Aminul Islam 2016-11-20

Hi [~ricardo_jcp], Thanks for reporting the issue. We are reviewing your project. We will get back to you soon. Regards, Appcelerator Support
Jebun Naher 2016-11-21

Hi [~ricardo_jcp] We appreciate your report. To complete the report, please mention steps to reproduce the issue. We'll need following info: 1. *Reproducible steps*: The specific series of steps or actions that you took up until encountering the problem. 2. *Expected result*: What you expected would occur in the application. 3.*Actual result*: What actually occurred after the final step/action. Thanks.
Ricardo Pereira 2016-11-21

Kota Iguchi 2017-02-08

In sdk 6.0.x borderRadius takes effect, but component background overflows border radius like screenshot attached in the ticket. Currently we don't have a good way to do this. We are using Xaml Border component but it does not show border quite well like this, I would take this is a technical limitation due to the platform component spec for now. We would like to keep this ticket open so that we can keep track on this. !border.png|thumbnail!

   var win = Ti.UI.createWindow({
       backgroundColor: 'green'
   });
   
   var view1 = Ti.UI.createView({
       width: 100, height: 100,
       top: 100, left: 100,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 5
   }),
   view2 = Ti.UI.createView({
       width: 100, height: 100,
       top: 120, left: 120,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 10
   }),
   view3 = Ti.UI.createView({
       width: 100, height: 100,
       top: 140, left: 140,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 20
   }),
   view4 = Ti.UI.createView({
       width: 100, height: 100,
       top: 160, left: 160,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 30
   }),
   view5 = Ti.UI.createView({
       backgroundColor: 'blue',
       width: 100, height: 100,
       top: 300, left: 100,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 5
   }),
   view6 = Ti.UI.createView({
       backgroundColor: 'red',
       width: 100, height: 100,
       top: 320, left: 120,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 10
   }),
   view7 = Ti.UI.createView({
       backgroundColor: 'yellow',
       width: 100, height: 100,
       top: 340, left: 140,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 20
   }),
   view8 = Ti.UI.createView({
       backgroundColor: 'gray',
       width: 100, height: 100,
       top: 360, left: 160,
       borderColor: "black",
       borderWidth: 3,
       borderRadius: 30
   });
   
   win.add(view1);
   win.add(view2);
   win.add(view3);
   win.add(view4);
   win.add(view5);
   win.add(view6);
   win.add(view7);
   win.add(view8);
   
   win.open();

said chaouche 2018-03-22

Hi, I have the same problem on Archos 40 Titanium Android version 4.2.2 TiSDK 7.0.0 If we change the layout after rendering view, the border will be corrected ex add setTimeout(function () { view6.opacity = 0.9; }, 2000);

JSON Source