We're currently working on an iPad version of our web application at work. We are seeing inconsistent behavior with regards to two-finger scrolling on scrollable areas within others scrollable areas across two iPads. Both devices are iPad2 models.
On one device, dojo grids and trees require one finger to scroll. On the other, they require two fingers to scroll. On both devices Safari is being used to view the website.
What could cause this behavior? Is there some setting we haven't discovered that dictates whether you need to use 1 or 2 fingers?
Looks like it's a difference in IOS versions (one is on 4, the other on 5).
It's important to note that
-webkit-overflow-scrolling:touch is not the same as one-finger scrolling enabled by iOS5.
-webkit-overflow-scrolling uses the iPad's built in functionality (the touch acceleration and bounce). However, if the contents in your div change, or you manually move the contents inside the div (ie you made your own div scrollbar and are scrolling the contents), enabling this will mess things up. What it will do is make the "top" of the scroll able div wherever it happens to be located. What does this mean? If your contents are scrolled half way down and then you add new content to the div, with -webkit-overflow-scrolling:touch, the very top of the touch-scroll area will be half way down your div. You will not be able touch-scroll back to the top.
Related
Is there a way in Chrome and Safari on iOS to restrict scrolling to one direction at a time? In other words, if I start scrolling an element vertically, I want to turn off the user's ability to scroll horizontally until the vertical scrolling is complete. And vice versa.
In iOS native code this is called directionalLockEnabled, and in Microsoft browsers it's -ms-scroll-rails.
Does something like this exist in CSS that Chrome for iOS (or Safari for iOS, because they use the same rendering engine under the hood) will recognize?
If not, is there a javascript solution available, ideally a React-compatible npm package?
If you're after a pure CSS solution, unfortunately there is nothing in the spec for locking scroll to a single axis at a time.
There are some great points on this thread, including some vanilla JS solutions if your use case requires locking the scroll behaviour to one axis at a time.
I would like to be able to use the areas that are occupied by the iOS in my app, using javaFX and Gluon. How can this be done?
That means any javaFX controllers functions as expected. Now they are almost impossible for a user to focus. When I have another controller in the middle area of the screen that one works like normal.
On iPhone 6 you can press the top most area and drag down to get access to a menu. The same exact thing with the bottom-most area by pressing then dragging upwards. And I believe that OS related functionality to be the reason.
The touch event probably do not reach the app properly over these areas. I am seeking to be able to have controllers placed here and have them work just as they are in other places.
This was done by adding a VBox layout, with TextField and TextArea to Gluon Layer - and then adding it to Layers of a class extending Gluon View (Called "BasicView").
I have created a website at the following address http://www.light-union.com/
Background Info: The website works as I expect on android, The website problem I am facing, as I see majority of the developers in this world are facing is the incompatible scrolling feature and fixed elements for iPhone and iPad.
I have decided to conform to such restrictions by making the banner be position:absolute to the top and remove the navigation bar on the left side so these bugs can be avoided all together... Unless someone has a solution to these issues that I am unaware of.
Problem:
When the user touches one of the buttons in the nav bar, it seems to work at first and scroll to expected location, there is an animation, but when the user scrolls themselves, this is where the problems seem to occur. I understand this seems to be a unanimous fault for people but perhaps this is due to my lack of understanding in iOS rather then iOS itself. This will also render the top banner useless.
This is the main issue though, there exists scrolling elements for the text at the bottom of each back image. For example in the http://www.light-union.com/in/ page, in the bottom section, the text is scrollable but the other sections seem to be hit and miss with the scrolling element, where the middle section is always miss.
Implementation so far
.para{
overflow-y:scroll;
font-size: 0.8675em;
height:65%;
display:block;
-webkit-overflow-scrolling: touch;
}
This is the css used on the paragraphs where I wish to implement the scrolling feature.
NOTE: For desired result on iOS check android device
I am working on a project for iPhone (flash builder 4.6), in which I have to implement a custom scroll component.
Basically I have to show the Facebook users in a list render-er, scrolling is working fine initially but when the number of friends increases (more than 300) the scrolling freezes (mainly tapping not working, swipe is still working, I mean to say that MOUSE_MOVE event is not working properly here).
If any one have any idea about it, please share with me.
You need to create (or use an existing) list component that uses a virtual list. i.e. only creates enough cells (or renderers) needed to fill a screen. It then recycles the renderers as you scroll.
Have a look at this:
http://madskool.wordpress.com/2011/06/30/tutorial-3-lists-and-pickers/
Or if you are using stage 3D, http://feathersui.com/examples/components-explorer/
I am facing a strange issue with screen scrolling on 9810 device and simulator.
I have a complete order screen, which is shown when the order of the user is confirmed.
At the top there is Vertical Field Manager which contains another VerticalFieldManager ( containing Label Fields and buttonFields ) and a FlowFieldManager (containing images).
Now the problem that i am facing is that whenever i scroll the screen up and down , there are many gray lines appearing on the screen. It seems as if there is some screen refresh issue with the device. I tested on previous OS (4.5, 4.5 4.7 5.0) version, everything is working just fine on them. The problem is arising on OS version above 6.0 .
While the correct screen must be like
As you can see these gray lines appear whenevr i scroll screen up and down. Any ideas how to rectify this issue ?
In the first image, it looks like you are trying to add a shadow effect at the top of the screen. The vertical field manager uses some graphics optimization to improve scroll performance. Instead of repainting everything, it picks up the pixels on screen in the layout area, and shifts them. This works so long as all the painting code is relative to the virtual extent.
Certain UI effect, like a shadow effect, are relative to the screen, rather than the virtual extent, so this optimization picks up those effects and copies them elsewhere, which looks bad. It also tends to look just like your first image.
There are two ways to fix this:
Turn off the optimization. Override isScrollCopyable to return false. Your visual problems should go away, but scrolling performance will suffer.
Don't add UI effects on top of a scrollable area.
I am very sorry for the late reply. However i fixed the issue by myself. I just overrided the paintBackground method in my class and inside that i wrote graphics.clear(). This seems to fix this scrolling issue. I will try Michael method too though.