Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#15386 closed defect (fixed)

dojox/css: transition error (white screen) if virtual keyboard is open

Reported by: freemant2000 Owned by: nic
Priority: undecided Milestone: 1.8
Component: Dojox Version: 1.7.2
Keywords: todoapp Cc: Eric Durocher, zhangyp, Ed Chatelain
Blocked By: Blocking:

Description

reproducible with this procedure: 1) go to a scene with a text box. 2) click on that text box so that the virtual keyboard comes up. 3) click a button to transition back to the previous scene. Only one, not two transitions will complete. More preciously, somehow the virtual keyboard is blocking the webkitTransitionEnd event for one of the transitions. 4) return to that scene. The blocked webkitTransitionEnd event will be released and somehow this caused the scene to be hidden (display set to "none" in the CSS style).

As a workaround, I added a timer to call the clear() method in dojox.css3.transition:

start: function(){

on.once(self.node, transitionEndEventName, function(){

self.clear();

}); add the code below this.cleared = false; var timeout = self.duration+100; console.log("timeout is "+timeout); setTimeout(function() {

console.log("clearing by timeout!"); self.clear();

}, timeout); end

this._applyState(this.endState);

}

The "cleared" flag is used to prevent doing the clearing work twice in the clear() method:

clear: function(){

add the code below if (this.cleared) {

console.log("already cleared, quitting"); return;

} end this.cleared = true; this._beforeClear(); this._removeState(this.endState); console.log(this.node.id + " clear."); this._onAfterEnd();

}

Attachments (2)

transition.patch (1.9 KB) - added by Eric Wang 7 years ago.
fix fade css3 transitionEnd event missing issue, Eric Wang (IBM, CCLA)
15386.patch (573 bytes) - added by Eric Durocher 7 years ago.
Another simpler patch - Eric Durocher (IBM, CCLA)

Download all attachments as: .zip

Change History (19)

comment:1 Changed 7 years ago by freemant2000

		start: function(){
			...
			on.once(self.node, transitionEndEventName, function(){
				self.clear();
			});
			//Add the code below
			this.cleared = false;
			var timeout = self.duration+100;
			console.log("timeout is "+timeout);
			setTimeout(function() {
				console.log("clearing by timeout!");
				self.clear();
			}, timeout);
			//end			
			this._applyState(this.endState);
		}

		clear: function(){
			//add the code below
			if (this.cleared) {
				console.log("already cleared, quitting");
				return;
			}
			this.cleared = true;
			//end
			this._beforeClear();
			this._removeState(this.endState);
			console.log(this.node.id + " clear.");
			this._onAfterEnd();
		}

comment:2 Changed 7 years ago by cjolif

freemant2000 if you could add a simple example that does reproduce the problem it would be ideal. Thanks.

comment:3 Changed 7 years ago by Adam Peller

Owner: changed from Adam Peller to nic
Status: newassigned

comment:4 Changed 7 years ago by bill

Component: DojoxDojoX App

Is this DojoX App?

comment:5 Changed 7 years ago by cjolif

The problem is in dojox/css3/transition.js, I suspect the issue is indeed showing up in dojox/app and/or dojox/mobile which both rely on this code.

comment:6 Changed 7 years ago by bill

Component: DojoX AppDojox
Summary: transition error (white screen) if virtual keyboard is opendojox/css: transition error (white screen) if virtual keyboard is open

Oh OK, so the component field was correct after all.

comment:7 Changed 7 years ago by zhangyp

the transitionEnd event seems to be stopped by the scrollable view. will need to investigate more about this. Thanks for reporting this bug.

comment:8 Changed 7 years ago by Eric Wang

After investigation, "fade" will missing "fade out" transitionEnd event if the soft keyboard pop up. "slide" and "flip" are not affected by soft keyboard.
However, if wrap the domNode by dojox.mobile.ScrollableView? or dojox.app.widgets.Container with scrollable=true, "fade" will not affect by soft keyboard.
Try to find how dojox.mobile.ScrollableView? do to work the "fade" transitionEnd event and the root cause of this issue.

comment:9 Changed 7 years ago by cjolif

Cc: Eric Durocher added

comment:10 Changed 7 years ago by Eric Wang

  1. on Android2.2/2.3, the "fade out" transitionEnd event will be lost if the soft keyboard popup, so we need to check nodes' clear status.
  2. The "fade in" transitionEnd event will before or after "fade out" transitionEnd event and it always occurs. We can check "fade out" node status in the last "fade in" node transitionEnd event callback, if node transition timeout, we clear it.

comment:11 Changed 7 years ago by cjolif

Keywords: todoapp added

Changed 7 years ago by Eric Wang

Attachment: transition.patch added

fix fade css3 transitionEnd event missing issue, Eric Wang (IBM, CCLA)

Changed 7 years ago by Eric Durocher

Attachment: 15386.patch added

Another simpler patch - Eric Durocher (IBM, CCLA)

comment:12 Changed 7 years ago by Eric Durocher

Cc: zhangyp added

Here is another patch, a little simpler, I just moved the _applyState call in start() into a setTimeout(0) call. Yes, yet another setTimeout... But I saw several authors on the web recommending to do that in any case (i.e., deferring setting the end transition values so that the browser has time to refresh its state). However, it is not 100% clear why this would be necessary here. But the fact is that the problem seems to be fixed with this patch.

EricWang, can you please check this fix in the todoApp?

zhangyp, any comment?

comment:13 Changed 7 years ago by Eric Wang

I try to use setTimeout(0) to clear the node status, but I have concerns on two many timers are created during transition maybe cause other problems. setTimeout is out of code's control, it depends on browser. It's better to keep the behavior consist on different browsers.

comment:14 Changed 7 years ago by Eric Durocher

Cc: Ed Chatelain added

I don't think the behavior of setTimeout(0) depends that much on the browser... but I agree that a solution without an additional timer would be better if we found one. Unfortunately we don't have such a solution.

So we have two possible patches:

  • first patch: the transition event is still missing, the patch simulates this missing event through a timer. This should not break existing code since the timer fires only when the bug actually occurs and the event is not fired.
  • second patch: the properties for the final state are set in a setTimeout(0), and this causes the event to be correctly fired by the browser in all cases. This patch is simpler and addresses the root cause of the bug (although it is not 100% clear why - since the start() method is already called through a timer initially, this second timer should not be necessary). The drawback is that the code path is modified even when the bug would not occur, so there is always a slight risk to break existing code (although it does not seem to be the case from my tests).

In summary, the first patch is a workaround, a little more complex but probably less risky, while the second patch is simpler, fixes the actual problem but in theory more risky.

zhangyp, as the original author of this, any opinion?

Also, since this module is mainly used in dojox/app, it would be nice to have the opinion of the dojox/app owners?

comment:15 Changed 7 years ago by Eric Durocher

After more tests, on iPhone the problem seems to occur even without using the keyboard (in the todoApp at least), and my patch does not fix the problem.

So the best candidate so far seems EricWang's patch, although it seems really fragile. Still investigating other solutions, if I don't find any we will fallback on this one...

comment:16 Changed 7 years ago by cjolif

Resolution: fixed
Status: assignedclosed

In [28832]:

fixes #15386. Fixes fade css3 transitionEnd event missing issue, Eric Wang & Eric Durocher (IBM, CCLA). If a cleaner fix is found this workaround should be replaced by the cleaner fix.

comment:17 Changed 7 years ago by bill

Milestone: tbd1.8
Note: See TracTickets for help on using tickets.