Opened 7 years ago

Closed 4 years ago

#15597 closed defect (worksforme)

Visual glitch during page transition on Android 4.0

Reported by: Damien Mandrioli Owned by: Patrick Ruzand
Priority: undecided Milestone: tbd
Component: DojoX Mobile Version: 1.8.0b1
Keywords: Cc: cjolif
Blocked By: Blocking:

Description

When navigating from one view to another the second view briefly appears very small on Android 4.x. This occurs only the first time.

This hurts mobileChart & mobileOpenLayer.

Attachments (3)

demo.html (1.1 KB) - added by Damien Mandrioli 7 years ago.
Minimal sample to reproduce
android.html (1.3 KB) - added by Sebastien Brunot 7 years ago.
Layout issue in Android 4 that is causing the glitching problem
transitions.html (2.5 KB) - added by Sebastien Brunot 7 years ago.
Minimal dynamic example that demonstrate the problem

Download all attachments as: .zip

Change History (16)

Changed 7 years ago by Damien Mandrioli

Attachment: demo.html added

Minimal sample to reproduce

comment:1 Changed 7 years ago by cjolif

Cc: cjolif added

comment:2 Changed 7 years ago by cjolif

Version: 1.7.31.8.0b1

comment:3 Changed 7 years ago by Damien Mandrioli

Pseudo-workaround: Add " -webkit-transform:scale(1.01)" to the body element Example: <body style="visibility:hidden; -webkit-transform:scale(1.01)">

Changed 7 years ago by Sebastien Brunot

Attachment: android.html added

Layout issue in Android 4 that is causing the glitching problem

comment:4 Changed 7 years ago by Sebastien Brunot

After reproducing the problem using the sample file demo.html, I narrowed it down to a layout issue in the Android 4 web browser just before the transition is started.

I've attached a sample file, android.html, that demonstrate the layout problem: when opened in the android 4 web browser, the blue div and the red div are both displayed on the page, next to each other, their width reduced by 50%. When displayed in Chrome, only the blue div is dispayed on the page, with a width of 100%, and the red div is off screen (not displayed).

Last edited 7 years ago by Sebastien Brunot (previous) (diff)

comment:5 Changed 7 years ago by cjolif

out of curiousity can we try with mblCSS3Transition: true to see if the problem is reproduced in that mode as well?

comment:6 Changed 7 years ago by Sebastien Brunot

I've tried adding mblCSS3Transition:'dojox/css3/transit' to data-dojo-config but that doesn't solve the issue...

comment:8 Changed 7 years ago by Sebastien Brunot

ykami: unfortunately this is a different issue, and we can still reproduce it using the "how do i avoid the margin collapsing problem" workaround.

comment:9 Changed 7 years ago by ykami

Oops, sorry I was not talking about this very problem. I was talking about unwanted padding during transition that was reproducible with the attached demo.html. (The problem you asked me via email.) Sorry about the confusion. Please ignore the above comment.

comment:10 Changed 7 years ago by Sebastien Brunot

Unfortunately, I think I missed the point with my android.html sample: if adding the meta data <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />, that was missing in the sample, the page is displayed as expected, so it can't be seen as an example of the core problem.

Changed 7 years ago by Sebastien Brunot

Attachment: transitions.html added

Minimal dynamic example that demonstrate the problem

comment:11 Changed 7 years ago by Sebastien Brunot

I've attached a new minimal sample, transitions.html, that demonstrate the problem using a dynamic transition between two div elements and that shows when the problem begins (when the in view is displayed, before the transition is started). Note that if device-width is replaced by an absolute value in the viewport meta tag, the problem does not occurs anymore.

comment:12 Changed 7 years ago by Patrick Ruzand

Owner: changed from Eric Durocher to Patrick Ruzand
Status: newassigned

comment:13 Changed 4 years ago by Patrick Ruzand

Resolution: worksforme
Status: assignedclosed

Don't reproduce on an android 4.2.2 device.

Note: See TracTickets for help on using tickets.