[TIMOB-9679] MobileWeb: view - backgroundImage flashes when the view is clicked

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Not Our Bug
Resolution Date	2012-06-27T13:33:38.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	n/a
Components	MobileWeb
Labels	n/a
Reporter	Jon Alter
Assignee	Chris Barber
Created	2012-06-20T18:30:55.000+0000
Updated	2012-06-27T13:33:45.000+0000

Description

View backgroundImage flashes when the view is clicked

Steps to repro:

Step 1: save the attached image to your Resources dir Step 2: run the code below in ie9 or chrome Step 3: click on the view Step 4: watch it flicker (may not happen on every click)

var win  = Ti.UI.createWindow({
  backgroundColor: 'white'
});
win.open();

var view = Ti.UI.createView({
  backgroundImage : "background_productDetail.jpg",
  height: 500,
  width: 800
});
win.add(view);

Attachments

File	Date	Size
Archive.zip	2012-06-21T13:01:45.000+0000	3272389
background_productDetail.jpg	2012-06-20T18:30:55.000+0000	134854

Comments

Chris Barber 2012-06-20

I tried to fix the problem by setting a filter on the html element, but it didn't appear to fix it. html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
Chris Barber 2012-06-21

Pull request: https://github.com/appcelerator/titanium_mobile/pull/2448
Lokesh Choudhary 2012-06-26

Verified the issue on the build below & found it to be reproducible on chrome.Clicking on the image flashes. Titanium Studio : 2.1.0.201206251749 SDK version : 2.1.0.v20120626104306 Chrome : 19.0.1084.56

Chris Barber 2012-06-26

The only thing that could remotely trigger this is that Chrome returns the backgroundSize of "100%" instead of "!00% 100%" which we detect as a change, then set to "100% 100%". I wrote up a quick change to see if fixing this would fix the flashing, but it did not.

   --- a/mobileweb/titanium/Ti/_/UI/Element.js
   +++ b/mobileweb/titanium/Ti/_/UI/Element.js
   @@ -631,7 +631,7 @@ define(
                                           tmp = repeat ? "repeat" : "no-repeat";
                                           nodeStyle.backgroundRepeat !== tmp && (nodeStyle.backgroundRepeat = tmp);
                                           tmp = repeat ? "auto" : "100% 100%";
   -                                       nodeStyle.backgroundSize !== tmp && (nodeStyle.backgroundSize = tmp);
   +                                       nodeStyle.backgroundSize !== tmp && nodeStyle.backgroundSize + " 100%" !== tmp && (nodeStyle.backgroundSize = tmp);
                                   }
                           }
                   },

I think this might be a bug with Chrome. As of Chrome v21, this is still a problem.

Chris Barber 2012-06-27

I fixed the issues in IE. However the "flashing" in Chrome is minimal and from what I can tell, a bug in Chrome.
Lokesh Choudhary 2012-06-27

According to chris barber's comment that its a bug in chrome & we cant do anything about it. Thus,closing the bug.

JSON Source