I've got a sidebar that breaks to full width on mobile and it won't allow me to scroll further when I get there. The JQuery version has the swipePropagation option but the angular version seems to not allow scrolling at all when the content is less than the container. Does anyone have a solution to this?
Related
I have a few framer-motion scroll trigger animations, nothing too complicated, in my current application and I wanted to integrate locomotive scroll using https://www.npmjs.com/package/react-locomotive-scroll.
However, when I add it and start scrolling, the app flickers like crazy when scrolling to bottom and I noticed 2 scrollbars.
Anyone dealt with this and found a solution? Maybe I don't use this library but I couldn't find an alternative.
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I have built an app that utilizes semantic UI tabs and ui-router. Every time I switch tabs, the page 'snaps' to the div where the tabs are being held, instead of maintaining its position. I do not have any idea where to even begin looking.
Note I faced another similar issue earlier on in the build, where angularUI grid was causing the page to hop around and snap to the view. For the sake of trying to fix the current issue, I have commented out any angularUI grid line that could have caused the issue, leading me to believe it has something to do with semantic.
Has anyone faced an issue like this? Where do I even begin troubleshooting?
*please note, I am scrolling back up in the gif, then clicking a tab, where it snaps back down
I'm using the angular ui bootstrap accordian. Everything works great except when I expand an accordian section that is big enough to cause the browser to show a scrollbar for the page, the whole page jolts to the left by the amount of the width of the scrollbar. When the accordian is small enough that a scrollbar isn't needed, the page jolts back to the original size.
I'm not sure what to do about this...does this require a hack, or is there some elegant solution using accordian settings or bootstrap?
I think your only solution is to always show the scrollbar
How to always show the vertical scrollbar in a browser?
We've noticed lately that the grids in our website as well the ones on the demo page for the grid show the vertical scroll bar until the page finishes loading and then disappears. It appears to be adding 'overflow: hidden' to the table which has the effect of removing the scroll bar. When I remove this css (inside Chrome debugger) the scroll bar re-appears. I have confirmed this behavior on multiple users' systems.
Anyone know of a fix for this? I have a feeling this is something Telerik will have to fix.
This bug is happening because of a setting located in the Chrome debugger settings called ‘Emulate touch events’. When the Telerik grid detects a touch enabled browser it adds the overflow:hidden to the grid. In my case, a majority of the laptops at my work are touch screen enabled and so the 'bug' manifests on those machines.