-
Notifications
You must be signed in to change notification settings - Fork 222
Layout issues on Samsung Galaxy S4 #31
Comments
Hey |
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 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. |
truly off topic, sorry :) |
@jaunesarmiento no worrys. im testing on my Samsung Galaxy S4 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. |
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. :) |
I tested the application on the htc one, and I experienced no problems. |
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 |
On second thought, it may not be the flexbox layout that's the problem. Hmm.. |
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. |
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. |
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) |
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. |
Same problem at Galaxy S3 with leaked android 4.2.2 |
look like the problem comes from "-webkit-transform: translate3d()" replacing this by "-webkit-transform: translate()" fixed all the issues in my app. |
I had this issue for weeks now and I posted it about it, but it never got approved -_-! |
Is there any solution to this issue ?? |
I have exactly the same issue with my PhoneGap app on the GS4. It doesnt occur on a Nexus 7 running 4.2.2 or 4.3, or a GS2 running CM10 (4.2.2) |
Has anyone fixed this issue? Seeing it across the app - not using translate3d, but HW acceleration is on. Greg |
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. |
I'm not using an S4 - I've been deploying using PhoneGap and have seen Greg On Tue, Aug 13, 2013 at 10:13 PM, Jaune Sarmiento
Greg Avola |
Hey guys, can we use media query? |
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. |
Thanks for the note @andywhite37. |
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 |
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, |
This is a bug in Samsung phones' webviews concerning position: fixed elements. Don't bother trying to fix it. |
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: |
The GS4 gpu is crapola. I never 'solved' this beyond trying random Annoying
|
I am facing the same issue on samsung S4 devices.
Please let me know, if anyone has done this issue. Regards, |
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
The text was updated successfully, but these errors were encountered: