diff --git a/src/extended-css/extended-css.ts b/src/extended-css/extended-css.ts index 7af5a932..431e5012 100644 --- a/src/extended-css/extended-css.ts +++ b/src/extended-css/extended-css.ts @@ -91,6 +91,8 @@ export class ExtendedCss { private applyRulesScheduler: AsyncWrapper; + private applyRulesCallbackListener: () => void; + // Instance of ExtCssDocument is needed for using selector-ast cache extCssDocument: ExtCssDocument; @@ -128,6 +130,10 @@ export class ExtendedCss { if (this.context.beforeStyleApplied && typeof this.context.beforeStyleApplied !== 'function') { throw new Error(`Invalid configuration. Type of 'beforeStyleApplied' should be a function, received: '${typeof this.context.beforeStyleApplied}'`); // eslint-disable-line max-len } + + this.applyRulesCallbackListener = () => { + applyRules(this.context); + }; } /** @@ -139,7 +145,7 @@ export class ExtendedCss { if (document.readyState !== 'complete') { document.addEventListener( 'DOMContentLoaded', - () => { applyRules(this.context); }, + this.applyRulesCallbackListener, false, ); } @@ -153,6 +159,11 @@ export class ExtendedCss { this.context.affectedElements.forEach((el) => { revertStyle(el); }); + document.removeEventListener( + 'DOMContentLoaded', + this.applyRulesCallbackListener, + false, + ); } /** diff --git a/src/extended-css/helpers/document-observer.ts b/src/extended-css/helpers/document-observer.ts index 77e51991..c7cb9df0 100644 --- a/src/extended-css/helpers/document-observer.ts +++ b/src/extended-css/helpers/document-observer.ts @@ -22,6 +22,9 @@ const observeDocument = (context: Context, callback: MainCallback): void => { if (eventTracker.isIgnoredEventType() && shouldIgnoreMutations(mutations)) { return; } + // save instance of EventTracker to context + // for removing its event listeners on disconnectDocument() while mainDisconnect() + context.eventTracker = eventTracker; callback(); })); context.domMutationObserver.observe(document, { @@ -45,6 +48,8 @@ const disconnectDocument = (context: Context, callback: MainCallback): void => { document.removeEventListener('DOMNodeRemoved', callback, false); document.removeEventListener('DOMAttrModified', callback, false); } + // clean up event listeners + context.eventTracker?.stopTracking(); }; export const mainObserve = (context: Context, mainCallback: MainCallback): void => { diff --git a/src/extended-css/helpers/event-tracker.ts b/src/extended-css/helpers/event-tracker.ts index b14d7ed5..909225ad 100644 --- a/src/extended-css/helpers/event-tracker.ts +++ b/src/extended-css/helpers/event-tracker.ts @@ -25,8 +25,6 @@ const SAFARI_PROBLEMATIC_EVENTS = ['wheel']; export class EventTracker { private trackedEvents: string[]; - private lastEvent?: Event; - private lastEventType?: string; private lastEventTime?: number; @@ -42,7 +40,6 @@ export class EventTracker { } private trackEvent(event: Event): void { - this.lastEvent = event; this.lastEventType = event.type; this.lastEventTime = Date.now(); } @@ -64,4 +61,10 @@ export class EventTracker { && !!sinceLastEventTime && sinceLastEventTime < LAST_EVENT_TIMEOUT_MS; } + + stopTracking(): void { + this.trackedEvents.forEach((eventName) => { + document.documentElement.removeEventListener(eventName, this.trackEvent, true); + }); + } } diff --git a/src/extended-css/helpers/types.ts b/src/extended-css/helpers/types.ts index 86603075..6390c5b9 100644 --- a/src/extended-css/helpers/types.ts +++ b/src/extended-css/helpers/types.ts @@ -1,4 +1,5 @@ import { CssStyleMap, ExtCssRuleData } from '../../stylesheet'; +import { EventTracker } from './event-tracker'; import { ExtMutationObserver } from './mutation-observer'; export type MainCallback = () => void; @@ -78,6 +79,11 @@ export interface Context { */ isDomObserved: boolean; + /** + * Instance of EventTracker for document observing + */ + eventTracker?: EventTracker; + /** * Main document mutation observer */