Full Height Angular js application scroll doesn't work on mobile - angularjs

Here is my website: www.thebetcafe.com/app/
I have a full height (100%) div with overflow:auto; or overflow:scroll; in an angular js application.
When trying to scroll with my finger on my mobile, The screen isn't moving and application starts to be unresponsive sometimes.
Although, it seems to work very smoothly on my pc with safari, chrome, firefox.
Any idea why?

Related

REACT - Scroll to image loaded when component is re-rendered (happens only on IOS)

I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.

Angular Bootstrap Collapse Navbar Not Responsive on Mobile Viewports

I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!

angular animation error loading in firefox

Today, I was testing my angular app in Firefox.
My angular app has a couple of md-button and md-tabs. One of the md-tab contains table as it's content. Whenever I switch from this md-tab to some other md-tab in firefox, the table flashes for few seconds in new md-tab.
After spending some time in debugging, I found the property "animation", disabling which the flickering got disabled. To make it work, I changed the property "animation" to none for md-tab-content.
Whenever I start this application in firefox, it shows a popup box containing information for angular-animate.
I have run my application in chrome and safari, and it is working great in those browsers.
Regards
Ajay

Parralex scroll is not working in Mobile and tabs ( Laravel )

I am having parallax website in laravel, it working fine in desktop version but when i open the website in Devices. Its effect is not working. Zoomed images are shown but page scrolling is not working.

parallax page not working responsively

The landing page for site http://www.kisadesign.co.uk works for desktop but when viewed on mobile and tablet the ability to scroll has gone so all you can see is the navigation and top block. It's responding to the media queries but can't scroll down. Any ideas on how to fix this?
I'm not sure what jquery you use for the parallax scrolling but I use Skrollr for my website that it works pretty well for mobile devices.
https://github.com/Prinzhorn/skrollr

Resources