When laying elements horizontally (with horizontal scroll bar), and scrolling left/right,
IntersectionObserver API does not always fire event when an observed element enters the viewport.
This happens on mobile devices or when testing on desktop chrome while setting small dimensions of Responsive screen or mobile screens (iPhone 6/7/8 etc.)
Is there a way to overcome this?
Thank you
Related
I have a carousel (using react-native-snap-carousel) where each item is a card that has a title and a WebView. On Android, when attempting to scroll the web page loaded in the webview, the gesture handler of the Carousel gets fired first most of the time. On iOS, everything works fine.
So on Android it's virtually impossible to scroll the webpage vertically without triggering the horizontal Carousel scroll.
I have created a small Demo project where you can see the issue
https://github.com/dudeinthemirror/carousel-example
The question is: is there a way to fix this behavior for Android?
Thanks for your time
I currently have a ScrollView/Flatlist containing 4 items with paging enabled. When rendered, each item covers the entire screen in portrait mode. On Android, when the user tries to swipe vertically from one item to another, this requires "large" swipe gestures.
I am trying to increase the "sensitivity" of the react native ScrollView so that the user requires smaller swipe gestures to switch from one item to another.
At the moment the switch to the next/previous page requires that roughly 50% of the target page is visible. I want to reduce this value so that the user does not need to do big swipe gestures.
Any suggestions on how I could fine-tune the props of the ScrollView/FlatList would be great!
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
I have a screen with a ScrollView and a Button which is in the very bottom and is partially visible, i.e. top part of the button is in the screen, but the title is not visible, unless I scroll down:
expect(element(by.id(BUTTON_IN_THE_BOTTOM))).toBeVisible() => the matcher fails.
element(by.id(BUTTON_IN_THE_BOTTOM)).tap() => all is good, button is tapped.
This seems to be an inconsistency and I would think that the framework should be consistent in such behaviors. Is this the expected behavior?
was using detox 7.3.2
Most likely an inconsistency between matchers in Earl Grey, our iOS backend framework.
Regardless, you are asking for trouble by not scrolling. The position on screen is dependent on several factors, including device size, RN layout system and the OS layout system and content. You should not really make assumptions about pixel accuracy. By not scrolling the button the visible, you are introducing flakiness where there shouldn't be.
Use the swipe action on the list to get to the bottom of the screen so the button will be visible. As stated above, This will prevent flaky behaviors such as testing on small res devices will fail your tests.
I have a sencha touch 2.0 web application which I used on tablet(accessing from website address). It is a small application to paint on a canvas layer over an existing image.
I was unable to scroll the image instead just kept on painting on the canvas when I accessed it from tablet.
In browser I get this scroll bar but on tablet I generally need to touch the image and move it to scroll which doesn't work instead it paints on canvas. How can I have both of them? Is there any work around for this on Android browser?