diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html
index 27cddc043..f08ea06f5 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -4,7 +4,7 @@
     <div class="card-body more-padding">
       <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
         <div class="epoch-progress">
-          <svg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
+          <svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
             <defs>
               <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                 <stop offset="0%" stop-color="#105fb0" />
@@ -22,7 +22,7 @@
               class="rect {{rect.status}}"
               [class.hover]="hoverSection && rect.status === hoverSection.status"
               (pointerover)="onHover($event, rect);"
-              (pointerout)="onBlur($event);"
+              (pointerout)="onBlur();"
             >
               <animate
                 *ngIf="rect.status === 'next'"
diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts
index 093dde79a..7f305416f 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, Observable, timer } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ElementRef, ViewChild, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { StateService } from '../..//services/state.service';
 
 interface EpochProgress {
@@ -44,6 +44,8 @@ export class DifficultyComponent implements OnInit {
   @Input() showProgress = true;
   @Input() showHalving = false;
   @Input() showTitle = true;
+
+  @ViewChild('epochSvg') epochSvgElement: ElementRef<SVGElement>;
  
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
@@ -191,22 +193,26 @@ export class DifficultyComponent implements OnInit {
   }
 
   @HostListener('pointerdown', ['$event'])
-  onPointerDown(event) {
-    this.onPointerMove(event);
-    event.preventDefault();
+  onPointerDown(event): void {
+    if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+      this.onPointerMove(event);
+      event.preventDefault();
+    }
   }
 
   @HostListener('pointermove', ['$event'])
-  onPointerMove(event) {
-    this.tooltipPosition = { x: event.clientX, y: event.clientY };
-    this.cd.markForCheck();
+  onPointerMove(event): void {
+    if (this.epochSvgElement.nativeElement?.contains(event.target)) {
+      this.tooltipPosition = { x: event.clientX, y: event.clientY };
+      this.cd.markForCheck();
+    }
   }
 
-  onHover(event, rect): void {
+  onHover(_, rect): void {
     this.hoverSection = rect;
   }
 
-  onBlur(event): void {
+  onBlur(): void {
     this.hoverSection = null;
   }
 }