Nativescript: RadSideDrawer iOS white stripe glitch during transition animation over dark background

[srokatonie]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.5.0
• Cross-platform modules: 6.5.0
• Android Runtime: 6.5.0
• iOS Runtime: 6.5.0
• Plugin(s): -

Describe the bug
RadSideDrawer creates a white stripe glitch on the right side when hiding in dark mode on iOS. See video:
https://drive.google.com/open?id=1oi-FxcxfXKhqlPOcqqibtAGKZc6RjXjJ
or
https://youtu.be/3tsz66nwQJI

To Reproduce
Deploy a fresh Drawer Navigation template from https://market.nativescript.org/plugins/tns-template-drawer-navigation-ng on a device with a dark mode turned on

Expected behavior
No glitches

Sample project
https://market.nativescript.org/plugins/tns-template-drawer-navigation-ng

Additional context
it doesn't seem this is visible in a simulator. The recording has been done on an up-to-date iPhone Xr

[NickIliev]

@srokatonie while testing with this demo Playground I am not able to reproduce the issue. Using iPhone 11 with dark mode turned on. Can you try the playground on your side and let me know if you are still seeing the issue?

[srokatonie]

@NickIliev Hi, your demo seems to work, however, it's sliding not opening using the button. I wasn't sure how to add a button in this demo since it's a TypeSscript example. See Angular version here:
https://play.nativescript.org/?template=play-ng&id=bfA0Ld&v=4
where the issue occurs.

[NickIliev]

@srokatonie thanks for the clarification - I was able to reproduce the issue via the button toggle (where the transaction is faster then the manual swipe and the issue is visible).

Could you try the workaround implemented in this Playground - it seems to resolve the issue on my side.

The workaround is located in onRadLoaded function where I am accessing some of the native layers and making them transparent.

onRadLoaded(args) {
    let drawer = args.object as RadSideDrawer;

    if (isIOS) {
        /* Make RadSideDrawer transparent on iOS */
        let tkDrawer = drawer.nativeViewProtected.defaultSideDrawer;

        tkDrawer.style.shadowMode = TKSideDrawerShadowModeHostview;
        tkDrawer.style.shadowOffset = CGSizeMake(-2, -0.5);
        tkDrawer.style.shadowRadius = 50;
        tkDrawer.fill = TKSolidFill.solidFillWithColor(new Color(0, 0, 0, 0).ios)
        tkDrawer.style.blurType = TKSideDrawerBlurTypeNone;
    }
}

[srokatonie]

@NickIliev Yes, that looks good now!

I was about to suggest looking at this issue not only on dark mode but light mode with some background on the page - but I see you already checked that.

I believe the title of the issue and description needs to be amended by removing the "dark mode" since it also happens in "light mode" - just in case somebody was looking for a similar issue before it's fixed in the repo.