diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 80529067..fca6248f 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -242,8 +242,9 @@ $icon-font-path: '../icon-font' !default;
   }
 
   .vjs-control-bar {
-    z-index: 2;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
+    z-index: 2;
     font-size: 120%;
     // responsive controls sizes, based on container width
     // font-size: clamp(100%, 2cqw, 150%);
@@ -256,6 +257,7 @@ $icon-font-path: '../icon-font' !default;
     }
 
     .vjs-progress-control {
+      -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       position: absolute;
       left: 0px;
diff --git a/src/plugins/chapters/chapters.js b/src/plugins/chapters/chapters.js
index 43c92cc5..b9b0930b 100644
--- a/src/plugins/chapters/chapters.js
+++ b/src/plugins/chapters/chapters.js
@@ -77,7 +77,7 @@ const ChaptersPlugin = (function () {
   /**
    * Bootstrap the plugin.
    */
-  ChaptersPlugin.prototype.initializeChapters = function initializeChapters() {
+  ChaptersPlugin.prototype.initializeChapters = async function initializeChapters() {
     const chaptersUrl = this.options === true ? this.getChaptersFileUrlByName() : this.options.url;
 
     if (chaptersUrl) {
@@ -100,6 +100,10 @@ const ChaptersPlugin = (function () {
         default: true
       });
 
+      // required for Safari to display the captions
+      // https://github.com/videojs/video.js/issues/8519
+      await new Promise(resolve => setTimeout(resolve, 100));
+
       const end = this.player.duration();
       Object.entries(this.options).forEach((entry, index, arr) => {
         const cue = new VTTCue(