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.
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
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
I'm having a trouble with full-screen toggle of videojs HTML5 Player.
Here, I've got two videos on a page (https://yiddishevinkel.com/archives/9555) where the main video looks ok. But the video in sidebar, I'm not able to switch to full screen mode. When i hit the full-screen toggle, It switches to full screen and immediately gets exited from the full screen mode with "Exited fullscreen because fullscreen element was removed from document." warning in Firefox console.
Note that, Issue persist with single instance of video on page and chrome as well.
Without even consulting the fullscreen api documentation, it seems likely from the message you are getting that videojs is replacing an element and you are invoking requestFullScreen on that element or one of its children. An element that does not exist cannot be displayed full screen, therefore the mode exits, a behaviour that is both documented and pretty obvious from the message.
Solution: don't. Wrap it with a div and invoke requestFullScreen on that.
I am creating a site in pure Famo.us, I wanted to have 1 page with sections where the user has possibility either click on links and scroll to anchors or scroll sequentially to get to sections. I used initially famo.us scrollview, but its behavior was not was not similar to browser scroll - I tried many options. I implemented my own scroll with Scrollsync, modifier and transition but it still does not feel similar to browser scroll. But the main problem that on Laptop and Desktop PC - I need to set different scrollscale to function normally. Here is the app:
https://svet15.herokuapp.com/
Can anybody give a direction to solve the problem with syncscale and maybe how to make scroll similar to browser native scroll.
P.S. I keep mobile view separately from desktop, so window.width should be more than 500 to see the desktop view where I have this problem. Thank you in advance!
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.