[TIMOB-25754] iOS: setting viewShadowColor on Button causes it to ignore borderRadius property

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Brian García
Assignee	Jan Vennemann
Created	2018-01-26T10:37:32.000+0000
Updated	2020-10-07T17:21:06.000+0000

Description

setting viewShadowColor on Button causes it to ignore borderRadius property. testCase:

var win = Titanium.UI.createWindow();
var btn = Titanium.UI.createButton({
        viewShadowColor: '#992E2E2E',
	viewShadowOffset: {
		x: 0,
		y: 3
	},
	viewShadowRadius: 3,
        borderRadius:20,
        width:200,
        height:40,
        title:"test"


});

win.add(btn);
win.open();

Attachments

File	Date	Size
Captura de pantalla 2018-01-26 a las 11.33.33.png	2018-01-26T10:34:37.000+0000	9307
Captura de pantalla 2018-01-26 a las 11.34.17.png	2018-01-26T10:34:27.000+0000	8230

Comments

Hans Knöchel 2018-01-26

Did this work in earlier versions of the SDK? Also, it seems to work for me unless I set a background-color:

   var win = Titanium.UI.createWindow({backgroundColor: '#fff'});
   var btn = Titanium.UI.createButton({
     // backgroundColor: 'green',
     viewShadowColor: '#992E2E2E',
   	viewShadowOffset: {
   		x: 0,
   		y: 3
   	},
   	viewShadowRadius: 3,
     borderRadius:20,
     width:200,
     height:40,
     title:"test"
   });
    
   win.add(btn);
   win.open();

Brian García 2018-01-27

Just tested with the following SDK: ||SDK||borderRadius applied to shadow||borderRadius applied to button|| |6.1.2.GA|true|false| |6.2.0.GA|true|false| |6.2.2.GA|true|false| |6.3.0.GA|true|false| |7.0.0.GA|true|false| Just remember that could be related with this issue: [ImageView shadow](https://github.com/AndreaVitale/av.imageview/issues/24)
Sharif AbuDarda 2018-01-27

Hello, I tested the issue on previous version 7.0.0.GA, 6.3.0.GA, 6.2.2.Ga, I can see the border-radius does work with viewShadowColor. Also, as [~hknoechel], said with background-color this does not. So, the issue is with the background color. With background color, border-radius does not work, but viewShadowColor does. Thanks.
Brian García 2018-04-13

Any update on this?
Mark Henderson 2018-06-17

Any update on this? Such a strange glitch..
Hans Knöchel 2018-11-03

Would be great to see in 8.0.0! I'll also try to hack on this.
Hans Knöchel 2018-11-05

It seems to be related to clashing view-layer properties and clipping / masking. [This](https://stackoverflow.com/a/25475536/5537752) should work, but I wasn't able to apply it to the SDK structure so far. Any help is appreciated.
Hans Knöchel 2019-01-03

Quick workaround: Create a view with a label instead of a button and / or place the button inside the shadowed view.
Brian García 2020-06-08

Any news on this?

Vijay Singh 2020-09-28

[~bgarcia] It should work in 9.2.0 with a minor change (Update

    borderRadius: 20

    borderRadius: '20 20'

). Reason is in case of multiple value of border radius, we use UIBezierPath and CAShapeLayer to create add corner radius. See following updated test case -

    var win = Titanium.UI.createWindow({
    	backgroundColor: 'white'
    });
    var btn = Titanium.UI.createButton({
        viewShadowColor: 'red',
    	viewShadowOffset: {
    		x: 0,
    		y: 3
    	},
    	viewShadowRadius: 3,
    	backgroundColor: 'green',
        borderRadius: '20 20',
        width:200,
        height:40,
        title:"test"
    });
     
    win.add(btn);
    win.open();

Pietro Granati 2020-09-30

Same problem, confirm that the '20 20' solution works but sometimes render strangely with shadow over button
Brian García 2020-10-07

I can confirm what Pietro reported. with the "20 20" the shadow works nice until you hide the button, in that case the shadow remains in screen and, in my case, it has a strange animation. I can share a video showcasing the issue in private

JSON Source