Layout issues on Samsung Galaxy S4

[joelstahre]

Hey, I really like your work with fries. it is awsome.

I have a little problem though, when I transfer my code with PhoneGap to my android phone the layout breaks sometimes.

see the picture below. You can se the tabs breaks.

//Joel

[jadjoubran]

Hey can you please provide the name of the Phone you're using to test on? Thanks

[jaunesarmiento]

Hi @joelstahre, I'm sorry for the late response. Either the browser of the phone you're using does not support CSS flexbox layout or we'd have to work on the CSS styles of the tab bar. Please give more details about your test environment like OS version, model of the phone, etc.

Cheers!

[aboudard]

For information, for me : Tabs work fine on Eclipse Emulator, just about to test on device.

By the way, do you plan to handle gestures ? I thinks about the tabs especially, where people expect viewpager behavior. Awesome work anyway, totally kicks some *\ !

[jaunesarmiento]

@aboudard Great thanks! :)

About handling gestures, off-topic but yes. I'm planning to add that feature. Actually, @aymanfarhat (https://github.com/aymanfarhat) has already done a prototype of that. Although there are still some quirks that are needed to be done like the dragging behavior.

[aboudard]

truly off topic, sorry :) thanks again !

[joelstahre]

@jaunesarmiento no worrys.

im testing on my Samsung Galaxy S4 Model: GT-I9505 Android-version : 4.2.2

there is no problem when I run it on different emulators, but when I test on my device i sometimes get problems with the layout. I post some more pictures below . //Thanks

[jaunesarmiento]

Wow. I'm guessing this is a rendering issue on Galaxy S4 but I'm not 100% sure. If anybody else can replicate this issue on their S4, then I guess it'll be safe to say that it's a rendering issue. I'll check if the Samsung changed something in the browser for S4 phones, maybe that'll clear a few things out.

Because I have been testing Fries on Google Nexus S which is a relatively old phone and I haven't encountered an issue such as this.

Thanks for reporting this. :)

[joelstahre]

I tested the application on the htc one, and I experienced no problems. so I guess it could be a problem just on the galaxy s4.

[jaunesarmiento]

After a dozen of searches regarding any change to the stock browser of Samsung Galaxy S4, I found out that it's using Chrome 18 as its stock browser based on this post. Whether this true or not, somebody has to test it.

On another note, I can try to mix the old and new syntax of flexbox layout for the tabs. The current implementation of this on Fries uses the old syntax display: box and display: -webkit-box. So I think adding in the new syntax might solve this but I really can't test it on an S4. Maybe someone else can test it.

[jaunesarmiento]

On second thought, it may not be the flexbox layout that's the problem. Hmm..

[Wolfr]

The problem with the syntaxes is that they are hard to mix.

You could do modernizr detection and code based on .flexbox and .flexbox-legacy.but this introduces a new depedency.

[YEYE77]

I have a phonegap app that use flexbox (with the -webkit prefix) and the layout is completly broken. I think it's an issue with the latest update on the S4 but havent found any workaround right now.

[kaansoral]

The S4 android issue existed before, the UI was being messed up non deterministically, however the latest update made the problem "always on"

If you download/test some other phonegap apps they all have UI issues, so the best thing to do is wait for it to be fixed (I wonder if Android has an issue tracker for outsiders)

[jaunesarmiento]

I'm labeling this as a device-related issue on the Galaxy S4. I definitely want to understand more of this problem but sadly, I don't have an S4. I haven't had any issues with the layout before S4 came out.

[neonxp]

Same problem at Galaxy S3 with leaked android 4.2.2

[YEYE77]

look like the problem comes from "-webkit-transform: translate3d()" replacing this by "-webkit-transform: translate()" fixed all the issues in my app.

[cherimo]

I had this issue for weeks now and I posted it about it, but it never got approved -_-! Also an Android Device 4.2.2 with phonegap 2.9.0

[cherimo]

Is there any solution to this issue ??

[trullock]

I have exactly the same issue with my PhoneGap app on the GS4. I am not using flexbox, but I am using translate3d, I shall investigate and see if replacing this with translate has any positive effect. fwiw turning HW acceleration on/off doesnt help.

It doesnt occur on a Nexus 7 running 4.2.2 or 4.3, or a GS2 running CM10 (4.2.2)

[gregavola]

Has anyone fixed this issue? Seeing it across the app - not using translate3d, but HW acceleration is on.

Greg

[jaunesarmiento]

Hi @gregavola, are you using a GS4? As I said in my previous comment, I don't have an S4 where I can test this issue on. But from the looks of it, the problem seemed to have occurred because of translate3d. But since other Android devices don't have any problems with rendering, the culprit must be the default browser that S4s use to render a webview.

[gregavola]

I'm not using an S4 - I've been deploying using PhoneGap and have seen problem seen problems with S4 - so I assumed this might be a solution.

Greg

On Tue, Aug 13, 2013 at 10:13 PM, Jaune Sarmiento notifications@github.comwrote:

Hi @gregavola https://github.com/gregavola, are you using a GS4? As I said in my previous comment, I don't have an S4 where I can test this issue on. But from the looks of it, the problem seemed to have occurred because of translate3d. But since other Android devices don't have any problems with rendering, the culprit must be the default browser that S4s use to render a webview.

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/31#issuecomment-22611116 .

Greg Avola http://gregavola.me (c) 508.596.8811

[ashishbhatt]

Hey guys, can we use media query?

[andywhite37]

This is not related specifically to fries, but I wanted to add a note that I've seen this same problem occur in PhoneGap 2.7 using Bootstrap UI components (Bootstrap 2.2.2), running on the Galaxy S4. There is one occurrence of translate3d in the Bootstrap CSS (bootstrap-responsive.css), and I changed it to "translate". At first it appeared to help address the UI glitch, but later on the problem came back randomly. I'm also not using any flexbox layout stuff. It does appear to be a rendering issue or hardware acceleration issue, specifically on the Galaxy S4, and possibly other Samsung devices from that time period. To add one last note, it appears to mainly affect UI elements that have position: fixed. It does not seem to crop up for non-fixed elements.

[jaunesarmiento]

Thanks for the note @andywhite37.

[kaansoral]

I've just tested cordova 3.1.0 - compared to older versions, while my app glitches right away on older versions, it is solid using 3.1.0 - even if the issue re-occurs in future - at least I can safely say that there is a solid improvement - wondering what it could be again not related to fries, but this issue has became a go-to place for S4 issues :)

[Kaarthikeyaan]

HI Team,

I am using Phonegap 2.7.0 with appframework UI, the app looks very nice except Samsung Galaxy s4. In S4 HTML input elements breaks, some images disappears and all drastic changes happens. My resources are present within the bundle no request is triggered outside the application. When i render the html in browser it works fine, the same is not working in webview. Please give some solution to achieve this.

I have tried by removing translate3d in css. But no use of it.

Thanks, Karthik

[sidneys]

This is a bug in Samsung phones' webviews concerning position: fixed elements. Don't bother trying to fix it.

[KailoonZeng]

hi,is there any solution for this issue? i have the same problem with Samsung galaxy S4 , but it dose n't occur on other several models of Samsung phones. by the way,the follow line can make things a little better,but just a little better: text-transform: translateZ(0); transform:translateZ(0);

[trullock]

The GS4 gpu is crapola. I never 'solved' this beyond trying random workarounds described here.

Annoying On 9 Jul 2014 22:54, "KailoonZeng" notifications@github.com wrote:

hi,is there any solution for this issue? i have the same problem with Samsung galaxy S4 , but it dose n't occur on other several models of Samsung phones. by the way,the follow line can make things a little better,but just a little better: text-transform: translateZ(0); transform:translateZ(0);

— Reply to this email directly or view it on GitHub https://github.com/jaunesarmiento/fries/issues/31#issuecomment-48525772.

[Sabirahmed]

I am facing the same issue on samsung S4 devices. 1) Layout breaking 2) Camera issue: Capture the image then save, After click on save button goes to splash screen. It's working on other devices iOS / Android. 3) Anomalous behavior of Apps.

Please let me know, if anyone has done this issue.

Regards, RAkesh Nigam email: rakesh.nigam@srmtechsol.com