Open Jinukurian7 opened 2 years ago
I built a simple site using smoothState.js where I'm calling modernizr. Everything working well so far but modernizr duplicating the classes to the element on every page transition and causes the page to freeze after a few pages navigations.
Script files
src/lib/vendors/jquery.min.js src/lib/vendors/jsmoothState.js src/lib/vendors/modernizr.js src/lib/vendors/main.js
This is my main.js
smoothState: function() { // Init here. var $body = $('body'), $main = $('#main'), $site = $('html, body'), transition = 'fade', smoothState; smoothState = $main.smoothState({ onBefore: function($anchor, $container) { var current = $('[data-viewport]').first().data('viewport'), target = $anchor.data('target'); current = current ? current : 0; target = target ? target : 0; if (current === target) { transition = 'fade'; } else if (current < target) { transition = 'moveright'; } else { transition = 'moveleft'; } }, onStart: { duration: 400, render: function (url, $container) { $main.attr('data-transition', transition); $main.addClass('is-exiting'); $site.animate({scrollTop: 0}); } }, onReady: { duration: 0, render: function ($container, $newContent) { $container.html($newContent); $container.removeClass('is-exiting'); } }, }).data('smoothState'); }
This is my HTML element after a page navigation. Classes not getting replaced instead they are being duplicated
<html class="svg no-touchevents no-cssgridlegacy cssgrid flexbox webp no-jpeg2000 webp-alpha webp-animation webp-lossless js-focus-visible svg no-touchevents no-cssgridlegacy cssgrid flexbox webp no-jpeg2000 webp-alpha webp-animation webp-lossless">
How to prevent this odd behavior?
I built a simple site using smoothState.js where I'm calling modernizr. Everything working well so far but modernizr duplicating the classes to the element on every page transition and causes the page to freeze after a few pages navigations.
Script files
This is my main.js
This is my HTML element after a page navigation. Classes not getting replaced instead they are being duplicated
<html class="svg no-touchevents no-cssgridlegacy cssgrid flexbox webp no-jpeg2000 webp-alpha webp-animation webp-lossless js-focus-visible svg no-touchevents no-cssgridlegacy cssgrid flexbox webp no-jpeg2000 webp-alpha webp-animation webp-lossless">
How to prevent this odd behavior?