[TIMOB-28150] iOS 14: Updating backgroundImage displays irrelavant image inbetween change

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2020-10-02T14:17:10.000+0000
Affected Version/s	Release 9.0.3, Release 9.2.0
Fix Version/s	Release 9.2.1
Components	iOS
Labels	ios, ios14
Reporter	nicolomonili
Assignee	Vijay Singh
Created	2020-09-23T09:38:33.000+0000
Updated	2020-10-02T14:17:10.000+0000

Description

When updating a backgroundImage of a View after a timeout (or click event), while the new image is loading a different image (unreferenced, but bundled with the app) will display before the new image is displayed. This problem does not occur with ImageView:image. The problem shows with SDK 9.2.0 *and* 9.0.3.GA on iOS 14. The problem does *not* show with SDK 9.2.0 on iOS 13 or iOS 12. *Expected result* Irrelevant image should not display, only the backgroundImage that was set on creation and the one that is set after a timeout/click event. *Code* Sample app.js:


    var win = Ti.UI.createWindow({
        backgroundColor:'black'
    });
   
    var test1 = Ti.UI.createImageView({
       width : 100,
       height : 100,
       left : 10,
       top : 30,
       backgroundImage : "/images/arm1.png"
    });
    
    win.add(test1);
    win.open();
    
    win.addEventListener('click', e => {
        test1.backgroundImage = "/images/arm0.png";
    });

Attached are images from the assets directory. Do extract all of the images to reproduce the problem. (put them either in /Resources/images or /Resources/iphone/images.

Attachments

File	Date	Size
assets_images.zip	2020-09-23T09:36:17.000+0000	40820
Test image iOS 14.mov	2020-09-23T09:39:43.000+0000	1043889

Comments

Rene Pot 2020-09-23

For those watching, this issue does not occur with <ImageView image="image.jpg" />. So recommended path is to update to imageviews right now.

Vijay Singh 2020-09-24

In titanium, Ti.UI.backgroundImage is implemented using CALayer. In iOS 14+, CALayer comes with 'animation' (CABasicAnimation) while in iOS < 14 there is no such property in object. See below layer's properties on iOS < 14 and iOS14+ - iOS < 14 -

   <CALayer:0x600003faf9a0; position = CGPoint (50 50); bounds = CGRect (0 0; 100 100); contents = <CGImage 0x7f85bb70caa0> (IP)
   	<<CGColorSpace 0x600001b98180> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)>
   		width = 74, height = 74, bpc = 8, bpp = 32, row bytes = 296 
   		kCGImageAlphaPremultipliedLast | 0 (default byte order)  | kCGImagePixelFormatPacked 
   		is mask? No, has masking color? No, has soft mask? No, has matte? No, should interpolate? Yes; masksToBounds = YES; allowsGroupOpacity = YES; contentsScale = 2>

iOS 14+ -

   CALayer:0x6000025aa1e0; position = CGPoint (50 50); bounds = CGRect (0 0; 100 100); contents = <CGImage 0x7f844a206950> (IP)
   	<<CGColorSpace 0x6000001bc2a0> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)>
   		width = 74, height = 74, bpc = 8, bpp = 32, row bytes = 296 
   		kCGImageAlphaPremultipliedLast | 0 (default byte order)  | kCGImagePixelFormatPacked 
   		is mask? No, has masking color? No, has soft mask? No, has matte? No, should interpolate? Yes; masksToBounds = YES; allowsGroupOpacity = YES; contentsScale = 2; ; animations = [contents=<CABasicAnimation: 0x600002590f40>]>

Due to animations in iOS 14+ CALayer.contents is animating.

Vijay Singh 2020-09-25

PR - https://github.com/appcelerator/titanium_mobile/pull/12133
Samir Mohammed 2020-10-02

*Closing ticket*. Fix verified in SDK version 9.2.1.v20201001120538, and 9.3.0.v20201001144501. *Test and other information can be found at:* https://github.com/appcelerator/titanium_mobile/pull/12133

JSON Source