Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16597] iOS: Can't create modal transparent Window

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-05-21T20:55:25.000+0000
Affected Version/sRelease 3.2.1
Fix Version/sRelease 7.3.0
ComponentsiOS
LabelsbackgroundColor, window
Reportercarlo
AssigneeHans Knöchel
Created2014-03-07T13:58:29.000+0000
Updated2018-06-22T19:36:44.000+0000

Description

Try code above, after animation Window color is reset to Titanium.UI.backgroundColor 
var win = Titanium.UI.createWindow({
    backgroundColor: 'white',
});
win.open();
var fail = Ti.UI.createWindow({
	modal:true,
	backgroundColor:'transparent'//or #00FFFFFF
});
fail.add(Ti.UI.createLabel({
	text:"Test"
}));
fail.open();//after animation background is black (default)

Attachments

FileDateSize
Testingmodal.zip2014-06-24T20:40:59.000+000034558

Comments

  1. Ritu Agrawal 2014-03-10

    Moving this ticket to engineering as I can reproduce the issue with the provided test case.
  2. Giorgos Papadopoulos 2014-03-15

    I think we have to setup the parent view controller modal presentation style to use the same view presentation style. Add this: topVC.modalPresentationStyle = UIModalPresentationCurrentContext; before presenting the view controller on -(void)showControllerModal:(UIViewController*)theController animated:(BOOL)animated of TiRootViewController.m Tested it and works with TiSDK 3.2.1, on simulator 7.0.3.
  3. Tobias Høegh 2014-04-29

    It has nothing to do with the animation of the modal window. Same effect with animated set to false: fail.open({animated:false}); But sure. Looks like the solution is fine.
  4. Thierry Godfroid 2014-05-16

    FWIW, I did change it in 3.1.3GA and we get a transparent bg but it breaks the opening animation (slide up). Any clue ? thanks 3.1.3GA test on simulator 6.1
  5. Giorgos Papadopoulos 2014-05-17

    Could you provider a test case ? Then I will look it up.
  6. Thierry Godfroid 2014-05-17

    Here you go. With the code below, and without adding the line you mention (with UIModalPresentationCurrentContext), animation is ok, transparency is maintained during animation and it all goes black (as expected) at end of animation. Now, modify TiRootViewController with your line and recompile/run the app. When you click the red background, the modal just pops up without tthe slideup animation (but the end result shows the transparency). HTH Thierry 
       var navwin, modalnavwin, rootwin, rootmodalwin;
   rootmodalwin = Ti.UI.createWindow({
   	backgroundColor: '#7F00CCCC'
   });
   modalnavwin = Ti.UI.iOS.createNavigationWindow({
   	modal: true,
   	window: rootmodalwin
   });
   rootmodalwin.addEventListener('click',function(){ 'use strict';
   	modalnavwin.close();
   });
   rootwin = Ti.UI.createWindow({
   	backgroundColor: 'red'
   });
   rootwin.add( Ti.UI.createImageView({
   	width: 300,
   	height: 200,
   	image: 'http://www.appcelerator.com/wp-content/uploads/film_reel@2x.png'
   }));
   navwin = Ti.UI.iOS.createNavigationWindow({
   	window: rootwin
   });
   rootwin.addEventListener('click', function(){ 'use strict';
   	modalnavwin.open();
   });
   navwin.open()
    edited: I made a mistake in the previous version, it is of course navwin.open() at the last line not rootwin.open() !
  7. Thierry Godfroid 2014-05-25

    please be aware that with SDK 3.2.2 and SDK 3.2.3 (at least) adding the line to TiRootViewController.m *breaks* the modal slide up animation !! So, the full solution is bound to be more complicated, I am afraid.
  8. Ingo Muschenetz 2014-06-02

    [~srahim] to mark as invalid.
  9. Sabil Rahim 2014-06-24

    This is essentially happening due to the fact that the backgroundColor of the topMostViewcontroller is set to black by default. Which can be changed by using the following code. 
       Titanium.UI.setBackgroundColor('#fff');
    Previously we used to present the modal window on top of the viewcontroller stack which was leading to many orientation issues. Since we have moved to the right behavior of presenting the modal viewcontroller on top of the rootViewController. Hence if the backgroundColor of the rootviewController (which is by default black) would show throw the modal view if it's background color is set to 'transparent' The same behavior is shown on native apps too. Native sample app is attached to the project. Marking ticket as invalid.
  10. Thierry Godfroid 2014-06-25

    I find this a bit harsh. There are apps out there who manage to do that natively (Path, for instance). I have tried with transparency of the root window and failed. So could you show me how to adapt the sample I gave for reproduction so that it work with the setBackgroundColor() trick you mention ? Thanks
  11. Sabil Rahim 2014-06-29

    [~tgo] try the following code snippet 
        // this sets the background color of the root UIView 
    Titanium.UI.setBackgroundColor('white');
    var win = Titanium.UI.createWindow({
        backgroundColor: 'white',
    });
    win.open();
    var fail = Ti.UI.createWindow({
        modal:true,
        backgroundColor:'transparent'//or #00FFFFFF
    });
    fail.add(Ti.UI.createLabel({
        text:"Test"
    }));
    fail.open();//after animation background is black (default)
  12. Thierry Godfroid 2014-06-30

    I tested with this and added the setBackgroundColor() to my own test app (see post of 17-may). I agree that it changes the background color. But it still does not show the underlying root window under the tranparent modal. How do you propose to do that with only a color change ? It seems to me that the root cause is that the rootwindow is removed from the display and that's what solved with the trick shown by Giorgios.
  13. carlo 2014-09-02

    give root window the same background color of modal window is not a solution for me! I think you have to consider this issue still open
  14. Vishal Duggal 2014-09-07

    When you open a modal view controller with the modalPresentationStyle UIModalPresentationFullScreen (always the case on the iPhone and iPod), essentially the presenting view controller removes its view from the hierarchy. This is default behavior. So transparent modal windows are little difficult to do. In Titanium you can always fake the modal screen animations on a regular window by creating appropriate open and close animations for the window. A sample showing the cover vertical behavior is attached below. Going to mark the ticket as Wont Fix. 
        var win = Titanium.UI.createWindow({
        backgroundColor: 'white',
    });
    win.open();
    
    var fail = Ti.UI.createWindow({
        backgroundColor:'transparent',
        top:'100%',
        height:'100%'
    });
    
    var label = Ti.UI.createLabel({
        text:'CLICK TO CLOSE'
    })
    
    fail.add(label);
    
    
    var openAnim = Ti.UI.createAnimation({
        duration:500,
        top:0,
        height:Ti.UI.FILL
    }) 
    
    var closeAnim = Ti.UI.createAnimation({
        duration:500,
        top:'100%',
        height:'100%'
    }) 
    
    
    win.addEventListener('click',function(){
        fail.open(openAnim);
    })
    
    label.addEventListener('click',function(){
        fail.close(closeAnim);
    })
  15. Vishal Duggal 2014-09-07

    Triage + Workaround
  16. carlo 2014-09-08

    I change my code so I don't need modal parameter anymore, thanks for code snippets. Finally, we can't create *modal* transparent window. I think this should be reported in docs.
  17. Ingo Muschenetz 2014-09-08

    [~bhatfield] FYI.
  18. Tobias Høegh 2014-09-08

    As Vishal Duggal mentioned: Transparent modal windows are little difficult to do. Same info in the link below, but there is also a workaround/example code. So it's absolute possible. http://www.cocoaosx.com/2011/10/20/how-to-display-transparent-modal-viewcontrollers/
  19. Thierry Godfroid 2014-09-08

    I kind of agree with @Tobias Schibler. I know we can work around the issue but the goal of the titanium framework (at least to me) is that we can have the same behavior without resorting to per OS work arounds ....
  20. Vishal Duggal 2014-09-08

    @[~colorhat] The code sample shown does not present a ViewController at all. It just adds the childViewControllers view as a subview to the parentViewController view. This is essentially the same as what we do in Titanium when opening a non modal window.
  21. Tobias Høegh 2014-09-09

    [~vduggal] You make a good work! Thanks a lot. Would be good to have this facts with transparent modal windows in the docs.
  22. Lee Morris 2017-03-30

    Closing ticket as "Won't Fix". There has been no update for a while. If there is any problem, please open a new ticket.
  23. Sharif AbuDarda 2017-04-04

    The issue is happening for 6.0.3.GA.
  24. Hans Knöchel 2018-04-11

    It seems like this is natively possible since iOS 8. [~Andrea.Vitale] made a pull request which is pending review and is scheduled for 7.2.0. Thanks Andrea!
  25. Andrea Vitale 2018-04-11

    https://github.com/appcelerator/titanium_mobile/pull/10070 exposes MODAL_PRESENTATION_OVER_CURRENT_FULL_SCREEN and MODAL_PRESENTATION_OVER_CURRENT_CONTEXT presentation styles that can solve this issue! Here is an example: 
        	Ti.UI.createWindow({
    		backgroundColor: "white"
    	}).open();
    	
    	setTimeout(() => {
    		var window = Ti.UI.createWindow({
    			backgroundColor: "#4D000000"
    		});
    
    		window.add(Ti.UI.createView({
    			width: 200,
    			height: 200,
    			backgroundColor: "white"
    		}));
    
    		window.open({
    			modal: true,
    			modalStyle: Ti.UI.iOS.MODAL_PRESENTATION_OVER_CURRENT_FULL_SCREEN,
    			modalTransitionStyle: Ti.UI.iOS.MODAL_TRANSITION_STYLE_CROSS_DISSOLVE
    		});
    	}, 5000);
    and here a screenshot: http://i65.tinypic.com/2hs5ahz.jpg
  26. Samir Mohammed 2018-06-22

    *Closing ticket.* fix can be seen in SDK Version: 7.3.0.v20180618182516 *FR (Passed) Test Steps:*

    Created an application with the code above

    Ran the program

    waited for animation to take place/app to time out

    Noticed the background was transparent unlike before (Would stay black previously)

    *Test Environment* 
        APPC Studio: 5.0.0.201712081732
    APPC CLI: 7.0.4
    iphone 6 11.2 emulator
    Operating System Name: Mac OS High Sierra
    Operating System Version: 10.13
    Node.js Version: 8.9.1
    Xcode 9.2

JSON Source