Modernizr fails to detect scrollbar stylability - javascript

I'm using Modernizr to choose to hide all scrollbars when a page is being viewed in firefox. This is because I've styled the scrollbars using webkit's ::-webkit-scrollbar selectors and haven't found a suitable alternative for firefox.
Since it's best practice to keep from using the User Agent String, I'm following the most common recommendation to use Modernizr for feature detection instead of browser detection.
I'm using the CSS Stylable Scrollbars property (cssscrollbar). That's supposed to return true for everything except firefox, but instead returns false for all browsers for me. (including Chrome and Safari, for which we have the scrollbars styled and working).
Other than including the custom-modernizr.js file in the header of the site and using it in javascript I'm not sure what other code is worth sharing, but I've got to be choosy with the code I share because it's for work.
Here's the bit where I check:
if (Modernizr.cssscrollbar) {
console.log("Browser has css scrollbars!"); // This never gets run in Chrome, Firefox, or Safari.
} else {
console.log("Browser does not have css scrollbars.");
}
Any ideas to fix Modernizr, or another way to determine when to remove the scrollbars?

Related

The blur filter does not work in the browser firefox

I use the blur filter in my react application, in google browser or in microsoft edge everything works fine, but when I decided to test it in mozilla firefox I found out that it doesn't work there, I checked mozilla.org and didn't find anything special, maybe you have ideas?
<div style={{backdropFilter: `blur(${someValue}px)`}}
...
</div>
The backdrop-filter property is not enabled by default in Firefox. It is supported in newer versions, but it is hidden behind a flag, see MDN article to see that flag.
However you can probably achieve the same effect, using the more supported filter css property. The difference is that filter applies the effect to the element itself, while backdrop-filter applies it to the area behind the element.

Setting HTM5 text kills scrollbar drag in Chrome

I have a timer in Javascript that fires once per second to update some text in the page (HTML5) like this:
document.getElementById('CountDown').innerHTML = "some string";
This works fine except that if this code runs while the user is dragging a scrollbar handle the drag is aborted. This is a very annoying user interface behavior which I have not been able to resolve.
If I comment out the line in the timer event then the scrollbar works normally.
Note: It only happens on Chrome, not on Firefox or Opera.
Any idea how to address this?
The smooth scrolling is a very important and effective function to enhance the user experience, it looks like there are several cases like yours concerning the smooth scroll in the chrome browser, and how it's not working properly, but the issues are in must of time related with the older version, like:
https://github.com/simov/simplr-smoothscroll/issues/27
https://github.com/mathiasbynens/jquery-smooth-scrolling/issues/1
https://github.com/iamdustan/smoothscroll/issues/28
You could try the following rules in your CSS:
html, body {
overflow: hidden,
height: 100%
}
And for your container you could attach the following rules:
{
overflow: auto;
height: 100%
}
Instead, since the code work in the other browser means that your code is valid, so just make sure you're using one of the latest versions, clear your cache & give it a try.
Probably not the answer you want to hear but I had this problem several months ago, there are several known bugs with the smooth scrolling feature of chrome when javascript is updating the DOM.
The newer versions of Chrome seem to handle this much better. I did a quick test where the code is similar to yours on the latest version of Chrome, and there were no problems.
It seems unlikely that there is an error in your code if it is working well in other browsers. Might be best suggesting users to ensure Chrome is fully updated for the best experience on the website or to use another browser.
Seems to be OK now - after release of Chrome 68.0.3440

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Ascensor.js IE8

I am working on a new site, currently hosted here. I am implementing a single page design using the Ascensor plugin, found here. It works fine in Chrome and Firefox, and IE10 and IE9. However, in IE8, the home page loads and then if I click on any of the navigation icons, the page starts shaking, literally shaking left and right very fast, and the browser crashes after a few seconds. I have used Ascensor in IE8 before, and it had worked. I can't even debug as it just crashes without any warning in IE8. I've been trying to figure out what's wrong for the past few hours, with no success.
I checked the behavior in IE8 by:
Changing the document mode to IE8 in IE10.
Using a Win7-IE8 VM
If it helps, I am also using the following jQuery plugins on the page.
CarouFredSel and FancyBox for the gallery.jQuery custom content scroller
Also, I am using jQuery 1.8.3 as Ascensor does not run correctly using later versions.
Someone please point me in the correct direction. Thanks.
The issue was related to the scrollbar (not sure why it was occurring though). Using the following CSS on the body fixed the issue.
body
{
overflow: hidden;
}

JS Test for :target support

I'm writing some code that involves CSS tabs, but IE doesn't support the :target css3 attribute. I have a work around by checking the hash value in an interval (ew), but I want to only have that code run when :target is not supported. I would do the regular IE check, except early versions of Firefox do not support it, nor does early Safari or Opera. Does anyone know how to test for :target support?
You can test for CSS support by adding a rule like #someid:target { visibility:hidden; color:#abcdef; } and then setting the target to #someid, reading if the color is #abcdef, and then reseting the hash.
This will, however, generate entries in the browser history: 1 for when you navigate to the id, and 1 for when you reset it to whatever it was before. It may also create a flicker in your tabs, so that may not be ideal - but I don't know what you can get away with.
Ideally, tabs should ideally read and write the hash for bookmarkability. But I don't think that :target is the ideal solution to creating tabs. I know it looks appealing to begin with (did to me). Given the poor support of the selector, how badly it scales with nested or multiple tabs, and how volatile it becomes with other markup (someone adds a #skip-to link on the page), it is less headache to implement with good old clicks.

Categories

Resources