I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
Related
I am building a website which works fine on browsers on a laptop but when i start using the same on a mobile browser, i see that the only thing I am able to do on my mobile browser is to double tap to zoom in and be able to click and type.
I am not able to scroll or move the web page around to change the view port.
Has someone experienced the same problem before?
I am using bootstrap for this and the layout is responsive.
Please help.
Thank you
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
I'm using WP Toolkit to do the transitions between my app pages, it works fine , but I get this strange delay in between transitions while navigating from one page to another, it just shows a blank(black) screen which obviously doesn't look good. I also Need How to implement this in my app. I'd appreciate it if someone can help me with it or suggest another page transition library.
I've recently stumbled upon the TurnJS plugin to create a page turning effect. I'm working on a project right now with it to recreate a Flash flipbook that was built in the past. One of the stipulations is that it has to be shrunk or magnified to fill the browser window without scrolling. I've been experimenting with my own simple JS utilizing browser transform properties to scale the container. The scaling is working however the flip book effects don't work very well once everything has been scaled (shaky page transitions and the page corners don't work very well).
I've also been experimenting with without much luck either.
I've also implemented a chart on the second page using Flot and have also noticed that when zoomed, the mouse over are not aligned correctly. It's similar to what's happening with the page corners.
The original flash version: http://www.return-it.ca/ar2010/index.html
Without zooming: http://dev.bitpowered.ca/encorp/
Have I gone about this the wrong way? Is there an alternative to getthing this all to work, or am I SOL on this one? Thanks in advance.
I am currently developing a PHP website that has a lot of Flash components. On each page there are one or more custom Flash components embedded with swfObject, as well as sIFR navigation.
Every so often, ALL of the Flash objects on the page become unresponsive to the mouse (no hand pointer). So far I have found it happening only in Firefox 3.5.3 on Mac. I am using CSS to position everything with a specific stacking order to get around the bounding-box overlap issue - for example, the main navigation overlaps the top right corner of a big Flash component.
It works fine most of the time, however, if I click through the pages enough times in Firefox 3 on Mac, eventually I cannot "roll over" any of the Flash elements.
Does anyone know why all the Flash objects in a PHP page would stop responding to the mouse, sIFR included?
Here is the site if you want to give it a try.
This is usually a combination of putting wmode (transparent or opaque) on the Flash movie, which itself is contained in a floated element. Unfortunately it's a browser bug, but removing the wmode property should fix it.