Opened 6 years ago

Closed 6 years ago

#16347 closed defect (invalid)

dojox/mobile/View always sets paddingTop in performTransition but only conditionally removes it in onAnimationEnd

Reported by: Colin Snover Owned by: Colin Snover
Priority: undecided Milestone: tbd
Component: DojoX Mobile Version: 1.8.1
Keywords: Cc: cjolif
Blocked By: Blocking:


performTransition does this:

				if(detail.transition && detail.transition != "none"){
					// Temporarily add padding to align with the fromNode while transition = fromTop + "px";

onAnimationEnd does this:

			if(domClass.contains(this.domNode, "mblOut")){
				// Reset the temporary padding = "";

Therefore, the padding is not removed in all situations where it is set. I do not understand the point in adding this padding anyway since it only ever seems to cause incorrect layout during transition.

Change History (6)

comment:1 Changed 6 years ago by cjolif

Cc: cjolif added

comment:2 Changed 6 years ago by Eric Durocher

Can you provide or point to a test case where you see a problem?

comment:3 Changed 6 years ago by Sebastien Brunot

the problem can be reproduced with the sample html from

=> offsetTop for the first view is 7px in webkit, so the second view is added a padding top of 7px for the transition. In chrome and Android 4 (not tested in other browsers), this padding top is not always removed when the transition is done. And when it is, there is a glitch.

Maybe the padding top should never be added when the view has a header, as the header is always supposed to be on top ?

comment:4 Changed 6 years ago by Sebastien Brunot

A workaround is documented for the example case I've submited:

comment:5 Changed 6 years ago by ykami

Owner: changed from Eric Durocher to Colin Snover
Status: newpending

Hi Colin,

If you call performTransition(), onAnimationEnd will be called twice, one for out-view, the other for in-view. The condition you pointed out is for clearing the padding only for a view whose padding was actually added.

The purpose of the padding is to save some cases where each view is placed below something just like the following example. In this example, a header is staying on top of each view. You'll know what happens with this example if you comment out the code you pointed out.

<h1 data-dojo-type="">Application Header</h1>
<div id="view1" data-dojo-type="" selected="true">
	<h1 data-dojo-type="" back="Back"
		moveTo="view1">View 1</h1>
	<ul data-dojo-type="">
		<li data-dojo-type=""
			transition="slide">Slide this view</li>
<div id="view2" data-dojo-type="">
	<h1 data-dojo-type="" back="Back"
		moveTo="view1">View 2</h1>
	View 2

I was aware that unwanted padding could be added when so-called margin-collapsing occurred. In that case, unfortunately offsetTop returns some value, where it should be zero. Only workaround I came up with is this: .

So I still don't understand exactly what your problem is. Can you provide a small sample code to reproduce your problem?

comment:6 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Note: See TracTickets for help on using tickets.