Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9865] iOS: Opacity in nested views is inherited regardless of child opacity value

GitHub Issuen/a
TypeBug
PriorityLow
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 2.0.2, Release 3.1.0
Fix Version/sn/a
ComponentsiOS
Labelsapi
ReporterNeville Dastur
AssigneeUnknown
Created2012-06-26T16:42:36.000+0000
Updated2018-02-28T20:03:34.000+0000

Description

The following app.js demos the issue
(function() {	
	var self = Titanium.UI.createWindow({
        title: 'Window',
        backgroundColor: 'white',
        });    
    self.add(Ti.UI.createLabel({text: 'A label just to provide some background text to be overlayed with the views below'}));
    
    var view =  Ti.UI.createView({
        top:0,left:0,
        width:'100%',
        height:'100%',
        opacity: 0.60,
        backgroundColor: '#000000'
    });
    
    // Make a view to border all the items
    var inner_view =  Ti.UI.createView({
        width: '120',
        height:'70',
        backgroundColor: '#222222',
        borderWidth: 1,
        borderColor: '#000',
        layout: 'vertical',
        opacity: 1.0,
    });
    
    for(var i=0; i<3; i++){
        var b = Ti.UI.createLabel({
            text: 'Item 1',
            textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, 
            top: 5,
            borderWidth: 1,
            backgroundColor: '#353535',
            color: '#fff',
            opacity: 1.0,
        });
        inner_view.add(b);
    }
            
    view.add(inner_view);
    self.add(view);

    self.open();
})();
Note: on Android this works as expected.

Attachments

FileDateSize
screenshot-1.jpg2012-06-26T16:43:05.000+000018794

Comments

  1. Paul Hamilton 2012-07-18

    Having the same issue with my application. Would like to create an overlay that shows some of the background, but with views on top of it that are completely opaque
  2. jithinpv 2013-03-28

    Issue reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 Titanium SDK version: 3.0.2 iOS iPhone Simulator: iOS SDK version: 6.0
  3. Neville Dastur 2013-09-12

    It maybe that this is an iOS issue rather than appcelerator. The work around that I have found is to have two views under the main window to add things to.
       Window -> opaque_view
       Window -> non_opaque_view
       
    Then add the "overlay" items to the non_opaque view and so long as it is in the right order (or z-index'd) it seems to work)
  4. Ryan Asleson 2014-09-22

    This is definitely still an issue. I was working on an app and came across this behavior. I spent almost an hour on it before I figured that it *had* to be a bug and wasn't just an error on my part. Did some web searching and came across this issue.
  5. Paul Hamilton 2014-09-23

    Can use a background color with an rbga value. ios the alpha value is between 0-1 rgba(255,255,255,.5) android the alpha value is between 0-255 rgba(255,255,255,128)
  6. Dirlei DionĂ­sio 2016-05-10

    About RGBA: http://www.appcelerator.com/blog/2014/11/adding-transparent-background/

JSON Source