Can only scroll page with two fingers on iOS - css

We have a strange bug in our application where sometimes you can only scroll tall pages with two fingers. If trying to scroll with one finger the page doesn't move, and we just can't seem to find a solution to it. This only appears in iOS and in both Safari & Chrome. Any advice would be helpful!
Edit: Just to be clear, the desired outcome is to be able to scroll with one finger and NOT two fingers!

We finally found the root cause of this issue which was a failed old script that applied a ‘touchmove’-event listener, that somehow blocked touch events, that was not removed later due to the script failing.

It appears that this is an intentional behaviour. iOS is trying to prevent accidental one-finger scrolling in containers, forcing users to be explicit in their expected scrolling. We had the same issue on our website and I just found out about this on this website.
A possible solution (that I will confirm shortly) can be found here and here.
Let me know if that works for you.

Related

Is it possible to replicate the effects of disabling CSSOM View Scroll Coordinates flag in chrome using css code?

I want to know what disabling CSSOM View Scroll Coordinates flag in chrome://flags does and how can i replicate this behavior using code in my ReactJS app.
Additional information :
It seems after Chrome 85 update, ag-grid RTL support breaks and the grid is not able to scroll the content and sometimes the cells becomes white, i had to dig very deep into the past questions and try a lot of far fetched solutions to find what i have.
I found out that disabling CSSOM View Scroll Coordinates in chrome://flags will fix the bug!~ but the problem is i don't want to force my users and teach them to do this just so my app works, so i thought what ever disabling CSSOM View Scroll Coordinates does, maybe i can replicate it using css code or some other code
I have already reported this issue in ag-grid's git-hub but i'm still waiting for them to offer a solution in the mean time if i can get this to work only using code, it would be great as i have a lot of users which are not able to use my app just because of this simple bug ..
Thank you.

Desactivating a setinterval function?

I have absolutely no idea why, but on 2 websites (2 websites that I professionnaly work on, and they havent been hacked or compromised), my Chrome console keeps clearing every 500ms.
Which is pretty annoying.
I desactivated all extensions. Tried private browsing. It's the same thing.
I uninstalled chrome as well as my extensions. Same.
When I try to reproduce it on someone else's computer, I cannot.
When I use another Chrome session the issue does not happen.
I have absolutely no idea how to get rid of this or what is the exact cause of the issue.
The code running is :
setInterval(function(){console.clear();console.info('Console was cleared by browser extension.');},500);
Since I unfortunately do not seem to find the reason, my only question will be : would there be a way to desactivate that code or postpone the setinveral to a bigger number?
Thanks !
In Chrome, on the developer tools, click on the settings icon, and tick the the "Preserve Log" option so the console is not cleared.
If your websites happen to be ecommerce (Magento specially) I'll advice you to check your code well for unknown js. This is one of the "symptoms" of the Magecart credit card skimmer. Preserve log option

Ridiculous CSS media query issue

I am at a loss with why one page on a site that just went live is misbehaving on iPhone (and possibly others at 320 to 480 px wide.
I have used various simulators that have never let me down before (screenfly & iphone5 simulator) plus I have tested the responsiveness using browser resize and for some reason none of these methods can replicate the issue so I cannot find a way to correct the problem. I have cleared my cache and tried from a different phone.
The Problem:
Visit (site removed) from a phone and notice that this is the only page on the website that does not fill the devices screen. Visit any other page and you will see that the rest all fill the page normally.
If someone can point me in a direction to reproduce the problem (not on a phone) where I can access developer tools I should be able to correct the problem on my own.
I have tried reviewing my code to see what is different about that page in comparison to every other page and cannot find what appears to be causing the problem.
Some help would be gratefully appreciated.
Thank you in advance.
In Google Chrome on Phone it's ok!
Check your settings about responsive and specific browsers settings in CSS..
Good Luck, please give photo from Phone.
Okay, I found the issue. Was able to find a div element with in the contact form that had a fixed width and although the content within the form was properly set the div was pushing the entire page over.

div jumps down occasionally in chrome

I just encountered a very strange error using Chrome. Everything worked fine until recently.
The divs are jumping down occasionally, almost like a clear was applied to them.
I made a test page to show you guys, you have to reload sometimes in order to see it. The "Float-left" and "Float-right" is only side by side occasionally.
Visit the test page
I tried several diffrent computers and browsers, it only happens in Chrome and on this computer. I did not change any code, it just started acting like this today.
I really want to solve this problem as fast as i can, as it happens almost every page-load on the main site.
I found several matching threads here at Stack, i created the test page with the answers in mind, but the problem still occurs.
Thanks in advance /Jimmy
If you mean why is the <input class="user-content-right-test"> sometimes going down, it's because you have in <div id="user-content"> clear:both;. Remove the clear and it won't go down.

I don't want to display back and forward button in my browser. Is there any solution apart from popup trick?

customers does not want to allow user to use back or forward button. Just a clean page without commandbar and toolbar, same for FF an IE.
Disabling them is not an option as now.
You cannot change that kind of thing in a existing window -- the only way you can make those disappear is by opening a popup, specifying they should not appear in that popup when it's being opened.
Still, note that you should not try to disable those buttons nor have them disappear : your application should work fine with them, handle their actions -- after all, it's one of the few things users have understood in browsers...
And as a user, this is disturbing and annoying :
I don't like popup windows -- and I'm not the only one who doesn't
I don't like when a website tryies to take control over my browser
It will not always work anyway.
And, as a sidenote : even if the back/forward buttons are not displayed, users can still use Ctrl+left/right or some kind of equivalent !
I know this is not easy, but a part of your work as a web-developper is to explain your clients how Internet and web-applications work... not the same way as desktop applications !
If you can force your users into IE (can't believe I'm suggesting use of IE!) you can do this trick. Try running this from the command line
"C:\Program Files\Internet Explorer\iexplore.exe" -k
This will force IE into kiosk (or full screen mode), similar to pressing F11 when in a usual browser session.
PS. I agree with the other answers suggesting this should be discouraged but there are instances (such as when the end user really can't be trusted) that this is a good solution.
No, there's no other way.
However, this is extremely annoying behavior and should be greatly discouraged. This isn't a code issue to solve...this is behavior that shouldn't be implemented at all.
My opinion here, you have a client problem not a code problem. Whatever standard is the expectation, and the user has the expectation of having their back/forward buttons, break that and you break their experience.
Ever see a Windows application that removes the taskbar? That's the equivalent...
I don't think there is a reasonable way to disable the behavior. You may get rid of the buttons in various ways, but the behavior is still there (through keyboard commands, popup menus and so on).
The only reasonable way is to make your web application follow web semantics, and make the client realize this.
many web based ERP (for example) does not tolerate people using navigation buttons. BUT these web applications handle the fact people use these buttons and do not crash. That's what you should do. If each time people use the back button, they get an error message, they will quickly stop using it.
The solution that used to work in IE was adding a startup script with one line:
location.forward();

Resources