[TIMOB-27123] Animating view with border radius clips its children
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | n/a |
Status | Open |
Resolution | Unresolved |
Affected Version/s | Release 8.0.1 |
Fix Version/s | n/a |
Components | Android |
Labels | android, engSchedule, sdk-7.5.2.GA |
Reporter | pritish.george |
Assignee | Yordan Banev |
Created | 2019-05-31T15:53:09.000+0000 |
Updated | 2020-08-17T19:11:55.000+0000 |
Description
When a view has a borderRadius and is rotated it clips its children.
var objMatrix = Ti.UI.create2DMatrix();
var win = Ti.UI.createWindow({
backgroundColor: 'black',
});
var vw_main = Ti.UI.createView({
left: 0,
top: 0,
width: '100%',
height: '100%',
layout: 'vertical',
});
win.add(vw_main);
var vw_rect1 = Ti.UI.createView({
top: 20,
width: 200,
height: 300,
borderRadius: 10,
backgroundColor: 'red',
});
vw_main.add(vw_rect1);
var vw_rect2 = Ti.UI.createView({
width: 150,
height: 250,
backgroundColor: 'green',
});
vw_rect1.add(vw_rect2);
var checkBox = Ti.UI.createSwitch({
top: 10,
value: true,
style: Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
title: 'Border Radius is enabled',
//titleOn: 'Border Radius is enabled',
//titleOff: 'Border Radius is not enabled',
});
vw_main.add(checkBox);
checkBox.addEventListener('change', function (e) {
if (e.value) {
vw_rect1.borderRadius = 5;
checkBox.title = "Border Radius is enabled";
}
else {
vw_rect1.borderRadius = 0;
checkBox.title = "Border Radius is not enabled";
}
});
var slider = Titanium.UI.createSlider({
top: 10,
min: 0,
max: 100,
width: Ti.UI.FILL,
value: 50
});
slider.addEventListener('change', function (e) {
(vw_rect1).animate({
transform: objMatrix.rotate(e.value * 10),
duration: 0,
});
});
vw_main.add(slider);
win.open();
/*
The green view gets clipped when the red view has a borderRadius and is rotated.
However if the borderRadius is set again then the clipping issue is not present.
You can view this behaviour by disabling the borderRadius and enabling it again using the checkBox.
*/
Hi [~pritish.george], Can you try using latest sdk and check if you experience the same? Let us know the update. Thanks!
Hello, I was able to reproduce the issue with SDK 8.0.1.GA. I see on the first run with the 'Border radius is enabled" marked, the green view is clipped with the red view rotation. Now, after taking the mark out and again marking the box of 'Border radius is enabled", now, the rotation of the red view doesn't cause the green view clipping. This is a valid issue. Moving to the TIMOB. Thanks.
[~pritish.george] It will be helpful if you can share some details about your environment - are you having the mentioned issue on a real device or an emulator and with what Android version were they running?
Hi Yordan, I’ve tested the code on 8.0.2 GA on my Android device running Oreo. The views get clipped when the view is rotated.
[~pritish.george] Would you be able to share the specifics of the device - brand and model?
Samsung Galaxy J7 Prime
This is actually a bug on Google's end. Please see... https://issuetracker.google.com/issues/37123819 This issue has been brought up before here: [TIMOB-25661] We don't currently have a solution since it's a confirmed bug in the Android OS. It's a bug with rounded clipping and animation. The only known work-around is to get rid of the border. Or use a 9-patch image for the background and display content inside of it (ie: avoid clipping content).