Vertical space in the demo example on Samsung S4

[christopher5106]

Dears,
I build the demo app with cordova and tested on my Samsung S4.
The demo is great but... there is a vertical space between the main window and the chat window that lets us see a background (see attached)

. This space moves as soon as we scroll. I wanted to know if this is a problem of your library and, if not, how to resolve it.
In the positive case, I would definitely choose your library for our project !
Best regards

[mcasimir]

Well, thank you for reporting this. Now that the codebase is stable I need to fix this to release the first RC.

I need a little of your help too in order to solve this, since I can't reproduce the issue with my nexus 5 and mobile chrome.

First of all. The space is visible also without scrolling?

Also, can I ask you if navigating online demo with the same device the problem is still there? (It should).

Anyway this issue should be caused by translate3d and default overflow. According to http://stackoverflow.com/questions/19973483/css-translate3d-would-cause-element-draggable-in-the-mobile-browser, this should be solve the issue:

html, body {
    overflow-x: hidden;
}

Sadly html, body and any other container already has overflow:hidden;, so it may depends on other things.

Some tests you can do to isolate the cause:

• Get rid of scrollables in .app and .sidebar-right.
• Get rid of position:relative: add this somewhere in index.html <style>.app, .app-content { position: static !important; }</style>
• Make .app-body have position: relative: add this somewhere in index.html <style>.app-body { position: relative !important; }</style>
• Apply scale3d(1,1,0) to .sidebar-right-in .app (this should prevent touchMove to work on it due to another webkit bug)

These changes should be taken selectively and should break your layout :) ..but if this issue goes away then I can work on it.

Thank You!

---

Update, some other background: http://css-tricks.com/forums/topic/transform-translate-percentages-and-android/

[christopher5106]

First of all, THANKS a lot for your so quick reply and consideration !

1° The space disappears during scrolling on the chat window.

2° The issue does no appear on the online demo in the Chrome Browser of my
Samsung S4.

I'm going to test right now.

[christopher5106]

For the tests, where shall i find ".app" and ".sidebar-right" ? In
/assets/css/mobile-angular-ui-base.css only ?

[christopher5106]

Could you please send me 3 directories with the modifications for the 3
tests to try ? For me it's going to be more easy.

[christopher5106]

Same problem appears on right side also.

[mcasimir]

You can do everything in /assets/css/mobile-angular-ui-base.css or /assets/css/mobile-angular-ui-base.min.css (of course depends on what you load in index.html).

For scrollable you can put .scrollable { display: none !important;} at the bottom.

Anyway if it does not happen in mobile chrome just check that you have latest version, currently: v. 1.1.0-beta.20.

A latter, and probably more useful test would be to switch from percentage based translate3d to fixed one. Eg. replace 80% with 200px in css. If this fixes the problem then it is related to an android webkit bug that causes box model being calculated wrong with translate3d. The solution in that case would be either resort to javascript to calculate fixed sliding length from percentage of viewport or use 2/3 media queries to adjust sliding length in different devices.

[christopher5106]

I'm a bit lost.

The problem occurs in my phonegap app.

I tried to download back but could not find the "assets" directory.

I did not find the version number as well.

[mcasimir]

I’m sorry in the last release there is only a dist/ folder at the same level of demo/. If you have downloaded it now it should be the latest.

To make demo work in phonegap you should copy the folder inside the demo folder and use relative paths to link it (if i remember well).

[christopher5106]

OK now works (I had to specify also http:// in front of // links for
external links).

With <style>.scrollable { display: none !important;}</style> at the end of

tag in index.html, I still have the problem.

[christopher5106]

None of the three tests worked. (adding one of this three lines in the

section of index.html) <style>.scrollable {display: none !important</style> <style>.app-body { position: relative !important; }</style> <style>.app, .app-content { position: static !important; }</style>

[mcasimir]

Thank you. Can you try the latest also? (Replace 80% with 200px in css)

[christopher5106]

I see 80% at many places. Which one shall replace ?

Christopher Bourez
06 17 17 50 60

On Wed, May 14, 2014 at 6:22 PM, mcasimir notifications@github.com wrote:

Thank you. Can you try the latest also? (Replace 80% with 200px in css)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/53#issuecomment-43102906
.

[mcasimir]

I think all of them..

[christopher5106]

That works fine now.

I had also to get rid of " UI" in "Mobile Angular UI" in the left menu
otherwise the "Home" was not "touch-able".

[mcasimir]

Well then i should use a fixed width sidebar, that will be painful :(. Thank you very much for your help. I will notice you when I release the change.

[christopher5106]

Ok thank you very much

Christopher Bourez
06 17 17 50 60

On Wed, May 14, 2014 at 6:40 PM, mcasimir notifications@github.com wrote:

Well then i should use a fixed width sidebar, that will be painful :(.
Thank you very much for your help. I will notice you when I release the
change.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/53#issuecomment-43105294
.