patrickkunka / mixitup

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
https://www.kunkalabs.com/mixitup/
4.52k stars 736 forks source link

mixItUp() does not like predefined Firefox mobile profiles #572

Closed angeloabdiel closed 3 years ago

angeloabdiel commented 3 years ago
  1. While developing my website and using Firefox DevTool, I could see that the error: "Uncaught TypeError: window.navigator.userAgent.match(...) is null" shows up only when I have the browser on responsive mode with any of the predefined mobile devices profiles. The error below also shows up.

Detailed error: jQuery.Deferred exception: window.navigator.userAgent.match(...) is null _platformDetect@http://localhost:10121/assets/js/jquery.mixitup.js:317:56 _init@http://localhost:10121/assets/js/jquery.mixitup.js:241:9 _instantiate@http://localhost:10121/assets/js/jquery.mixitup.js:2024:15 $.fn.mixItUp/eachReturn<@http://localhost:10121/assets/js/jquery.mixitup.js:2040:17 each@http://localhost:10121/assets/js/jquery-3.4.1.js:367:19 each@http://localhost:10121/assets/js/jquery-3.4.1.js:202:17 $.fn.mixItUp@http://localhost:10121/assets/js/jquery.mixitup.js:2030:21 @http://localhost:10121/assets/js/main_script.js:95:37 mightThrow@http://localhost:10121/assets/js/jquery-3.4.1.js:3557:29 resolve/</process<@http://localhost:10121/assets/js/jquery-3.4.1.js:3625:12 setTimeout handlerresolve/<@http://localhost:10121/assets/js/jquery-3.4.1.js:3663:16 fire@http://localhost:10121/assets/js/jquery-3.4.1.js:3291:31 add@http://localhost:10121/assets/js/jquery-3.4.1.js:3350:7 then/<@http://localhost:10121/assets/js/jquery-3.4.1.js:3683:24 Deferred@http://localhost:10121/assets/js/jquery-3.4.1.js:3774:9 then@http://localhost:10121/assets/js/jquery-3.4.1.js:3668:20 jQuery.fn.ready@http://localhost:10121/assets/js/jquery-3.4.1.js:3863:4 jQuery.fn.init@http://localhost:10121/assets/js/jquery-3.4.1.js:3024:10 jQuery@http://localhost:10121/assets/js/jquery-3.4.1.js:152:10 @http://localhost:10121/assets/js/main_script.js:94:10 mightThrow@http://localhost:10121/assets/js/jquery-3.4.1.js:3557:29 resolve/</process<@http://localhost:10121/assets/js/jquery-3.4.1.js:3625:12 setTimeout handlerresolve/<@http://localhost:10121/assets/js/jquery-3.4.1.js:3663:16 fire@http://localhost:10121/assets/js/jquery-3.4.1.js:3291:31 fireWith@http://localhost:10121/assets/js/jquery-3.4.1.js:3421:7 fire@http://localhost:10121/assets/js/jquery-3.4.1.js:3429:10 fire@http://localhost:10121/assets/js/jquery-3.4.1.js:3291:31 fireWith@http://localhost:10121/assets/js/jquery-3.4.1.js:3421:7 ready@http://localhost:10121/assets/js/jquery-3.4.1.js:3901:13 completed@http://localhost:10121/assets/js/jquery-3.4.1.js:3911:9 EventListener.handleEvent*@http://localhost:10121/assets/js/jquery-3.4.1.js:3927:11 @http://localhost:10121/assets/js/jquery-3.4.1.js:36:10 @http://localhost:10121/assets/js/jquery-3.4.1.js:40:4 undefined

  1. Let's say one of the predefined mobile devices in Firefox is Galaxy S9 (Android) with screen resolution 360 x 740. The page is loaded (using F5, refresh button, or address bar) and when it is loading the "null" error appears in the console. The method I used to mix is this: $(function () { $('#portfolio_content').mixItUp(); });
  2. If I alter the screen resolution for one value up or down each, for example, 361 x 741, the error goes away and the pictures are loaded. In the scenario when a mobile predefined profile is used, then the pictures do not appear (unless you flipped the DevTool from desktop web to mobile web, somehow it passes the values, but once the page is refreshed, the pictures will be gone in mobile mode with a predefined profile).
  3. This might not be a big issue, since by altering only little values to the screen resolution profiles seem to fix it, however, the problem is with the predefined Firefox mobile profiles. This seems to happen only with this browser. At first I wasn't sure if it was going to affect my site, but once I saw that altering the values manually showed it worked, then I realized that mixItUp() does not like predefined Firefox mobile profiles. image
patrickkunka commented 3 years ago

Hi Angelo. From your logs, I can see that you are using a very old version (at least 7 years old) of JQuery MixItUp which is no longer supported. I would recommend upgrading to v3 if you can. Migration guide here https://www.kunkalabs.com/mixitup/migration-guide/

Thank you