time synchronization fixes

packages/clarity-js/src/core/time.ts

@@ -1,12 +1,17 @@
 let startTime = 0;
 
 export function start(): void {
-    startTime = performance.now();
+    startTime = performance.now() + performance.timeOrigin;
 }
 
+// event.timestamp is number of milliseconds elapsed since the document was loaded 
+// since iframes can be loaded later the event timestamp is not the same as performance.now()
+// converting everything to absolute time by adding timeorigin of the event view
+// to synchronize times before calculating the difference with start time
 export function time(event: UIEvent = null): number {
     let ts = event && event.timeStamp > 0 ? event.timeStamp : performance.now();
-    return Math.max(Math.round(ts - startTime), 0);
+    let origin = event && event.view ? event.view.performance.timeOrigin : performance.timeOrigin;
+    return Math.max(Math.round(ts + origin - startTime), 0);
 }
 
 export function stop(): void {

packages/clarity-js/src/layout/mutation.ts

@@ -160,7 +160,8 @@ function track(m: MutationRecord, timer: Timer, instance: number, timestamp: num
   let value = m.target ? dom.get(m.target.parentNode) : null;
   // Check if the parent is already discovered and that the parent is not the document root
   if (value && value.data.tag !== Constant.HTML) {
-    let inactive = time() > activePeriod;
+    // calculate inactive period based on the timestamp of the mutation not when the mutation is processed
+    let inactive = timestamp > activePeriod;
     let target = dom.get(m.target);
     let element = target && target.selector ? target.selector.join() : m.target.nodeName;
     let parent = value.selector ? value.selector.join() : Constant.Empty;