I am using ui grid 3.0.6. Until yesterday it was working fine. But there is a problem in Google chrome now.(Version 56.0.2924.87)
When I scroll the grid, or click on scroll down arrow it starts scrolling very fast. Couldn't control the speed. It was working fine and only in Chrome.
Can anyone help?
Thanks in advance.
Adding this style to my style.css is helped
.ui-grid-viewport {
overflow-anchor: none;
}
It's may be related to "Scroll Anchoring" feature, that has been enabled by default in Chrome 56.
description of feature
css-property "overflow-anchor: none", should solve this problem.
Related
Kendo grid MVC, scroll is not working on mobile browser. Not able to scroll on mobile but working fine on desktop browser.
Style touch-action set as none by Kendo, which was causing issue.
As an workaround added below code in document ready...
$(".k-selectable").css("touch-action", "auto");
This solved my issue.
Sharing this to save someone time probably.
On mobile devices, scroll down does not work when the services tab is clicked. I can't find the problem for hours. Anybody have any ideas?
The problem is class="page-overlay" have position:fixed;.
If you for example set it to absolute or none all work.
Brand Identity and Online Marketing do work. I opened the developer tools and saw that the div.logo.white is on top of the first two h2. That is probably what causes it, because the functionality works fine. Other than that, great layout and style.
I am using Bootstrap glyphicons and FontAwesome icons and am experiencing a strange bug where they do not show unless hovered over, at which point they are permanently visible. When I reload the page they aren't visible again.
This only happens in Chrome. Safari and Firefox both show the icons normally.
I am running Chrome v33.0.1750 - this has never happened before.
I found some JavaScript code to re draw the page and works for me. I found this on SO somewhere so it's not my code.
$(document).ready(function()
{
var Offset = $('body').offset();
$('body').offset(Offset);
});
I just figured it out. Turns out there's a conflict with one the jQuery plugins, holder.js - the image placeholder plugin. Removed that and the icons show fine now on reload.
Strange, considering that in Bootstrap's documentation, they use holder.js to generate images for their 'Thumbnails' section.
UPDATE:
It seems there is a conflict between Chrome 33 and any version of holder.js above v1.9.
https://github.com/imsky/holder/issues/81?codekitCB=415695904.557899
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
I would like to prevent horizontal scrolling on my site using the multitouch trackpad on Macbooks, magical mouse etc. This issue is solved for Firefox (using solution from here: Prevent horizontal touch pad scrolling on macbooks using Firefox?). But it still gives me trouble on Chrome.
Is there any way of preventing this functionality on Chrome (e.g. using eventlistener)? Thanks
I had the same problem, and setting overflow to hidden in the CSS did not work too. My solution was using:
jQuery('html, body').css('overflow-x', 'hidden');
I dont know why, but in JavaScript it works.
In CSS, you can use overflow-x: hidden; to prevent scrolling. If you apply it to the body, or another element specifically that should do the trick.