diff --git a/src/assets/fonts/subtitles.css b/src/assets/fonts/subtitles.css
index 2922f847a0fea702bf1829d27e8065112a7be9bd..b2a9e6fae4d1b8e644559a448ce6ebab46bf72ae 100644
--- a/src/assets/fonts/subtitles.css
+++ b/src/assets/fonts/subtitles.css
@@ -15,7 +15,7 @@
 }
 
 .ttml-monospaceSansSerif {
-    font-family: monospace;
+    font-family: Consolas, Lucida Console, Menlo, Monaco, Arial, Helvetica, monospace;
 }
 
 .ttml-proportionalSerif {
diff --git a/src/routes/player/Player.tsx b/src/routes/player/Player.tsx
index 2e9fd7dd0ba752ed12e440b85949273d33e05d8c..a497aaab6af089f53bf5fd93b649fbac68b96f33 100644
--- a/src/routes/player/Player.tsx
+++ b/src/routes/player/Player.tsx
@@ -141,7 +141,7 @@ const useStyles = createUseStyles({
     player: {
         width: "40rem",
         height: "30rem",
-        background: "#0f0",
+        background: "#dc5",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -154,6 +154,8 @@ const useStyles = createUseStyles({
     video: {
         maxWidth: "100%",
         maxHeight: "100%",
+        minWidth: "100%",
+        minHeight: "100%",
         margin: {
             left: "auto",
             right: "auto",
@@ -165,6 +167,6 @@ const useStyles = createUseStyles({
         right: 0,
         top: 0,
         bottom: 0,
-        background: "rgba(1, 0, 0, 0.2)",
+        textShadow: "rgba(40,40,40,0.8) 0px 0px 3px",
     },
 });
diff --git a/src/routes/player/subtitles/TtmlHelper.ts b/src/routes/player/subtitles/TtmlHelper.ts
index 9f2d8e6896c27ad42b7e04cbf09da3c1adb24181..d20704895fa08db74dfd4091b9fcc06bdc431fd5 100644
--- a/src/routes/player/subtitles/TtmlHelper.ts
+++ b/src/routes/player/subtitles/TtmlHelper.ts
@@ -30,24 +30,24 @@ export default class TtmlHelper {
                         let end = (i + 1 === timeEvents.length) ? duration : timeEvents[i + 1];
 
                         let cue = new Cue(start, end, "");
-                        const render = () => {
-                            TtmlHelper.renderTrack(track, document, state, start);
-                        };
-                        cue.addEventListener("enter", () => {
+                        const callback = () => {
                             if (state.callback) {
                                 window.cancelAnimationFrame(state.callback);
                             }
                             state.callback = window.requestAnimationFrame(() => {
-                                window.addEventListener("resize", render);
-                                render();
+                                TtmlHelper.renderTrack(track, document, state, start);
                             });
+                        };
+                        cue.addEventListener("enter", () => {
+                            window.addEventListener("resize", callback);
+                            callback();
                         });
                         cue.addEventListener("exit", () => {
                             if (state.callback) {
                                 window.cancelAnimationFrame(state.callback);
                             }
                             state.callback = window.requestAnimationFrame(() => {
-                                window.removeEventListener("resize", render);
+                                window.removeEventListener("resize", callback);
                                 TtmlHelper.clearUi(state.target);
                             });
                         });
diff --git a/src/routes/player/video/DashVideoElement.tsx b/src/routes/player/video/DashVideoElement.tsx
index bca35e0bb263a85f82a3802e4d45eed96f863c97..aa7dce58b95a301e6614a49b71c1bb95d62d0adb 100644
--- a/src/routes/player/video/DashVideoElement.tsx
+++ b/src/routes/player/video/DashVideoElement.tsx
@@ -92,7 +92,9 @@ export const DashVideoElement = forwardRef<VideoApi, PropsWithChildren<Props>>(f
             if (!player.isReady()) {
                 return;
             }
-            player.setQualityFor("audio", 0);
+            if (this.getCurrentAudioTrack()?.representationCount !== track.representationCount) {
+                player.setQualityFor("audio", 0);
+            }
             player.setCurrentTrack(track);
         },
         addEventListener(event: string, listener: () => void) {
diff --git a/src/util/ttml/styles.js b/src/util/ttml/styles.js
index d13ce0da5c3023e5b59fd9824677de6a6f3a9cf8..4510f645b55d36088c30f202c3fca328e7359999 100644
--- a/src/util/ttml/styles.js
+++ b/src/util/ttml/styles.js
@@ -26,12 +26,12 @@
 import * as imscNames from './names';
 import * as imscUtils from './utils';
 
-const DEFAULT_FONT_FAMILY = "proportionalSansSerif";
+const DEFAULT_FONT_FAMILY = "monospaceSansSerif";
 
 function StylingAttributeDefinition(ns, name, initialValue, appliesTo, isInherit, isAnimatable, parseFunc, computeFunc) {
     this.name = name;
     this.ns = ns;
-    this.qname = ns + " " + name;
+    this.qname = this.ns + " " + this.name;
     this.inherit = isInherit;
     this.animatable = isAnimatable;
     this.initial = initialValue;
@@ -118,7 +118,7 @@ export const all = [
                 return {'h': h, 'w': w};
             }
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             let h;
             let w;
             if (attr === "auto") {
@@ -206,7 +206,7 @@ export const all = [
         true,
         true,
         imscUtils.parseLength,
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             let fs;
             fs = imscUtils.toComputedLength(
                 attr.value,
@@ -259,7 +259,7 @@ export const all = [
                 return imscUtils.parseLength(str);
             }
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             let lh;
             if (attr === "normal") {
                 /* inherit normal per https://github.com/w3c/ttml1/issues/220 */
@@ -312,7 +312,7 @@ export const all = [
                 return {'h': h, 'w': w};
             }
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             let h;
             let w;
             if (attr === "auto") {
@@ -380,7 +380,7 @@ export const all = [
             }
             return r;
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             let padding;
             /* TODO: make sure we are in region */
             /*
@@ -558,7 +558,7 @@ export const all = [
             }
             return r;
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             if (attr[0] === "none") {
                 return attr;
             }
@@ -603,7 +603,7 @@ export const all = [
         function (str) {
             return str;
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             /* Section 7.16.9 of XSL */
             if (attr === "left") {
                 return "start";
@@ -718,7 +718,7 @@ export const all = [
                 return r;
             }
         },
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             /*
              * returns {color: <color>, thickness: <norm length>}
              *
@@ -883,7 +883,7 @@ export const all = [
         true,
         false,
         imscUtils.parseLength,
-        function (doc, parent, element, attr, context) {
+        function (doc, parent, element, attr) {
             return imscUtils.toComputedLength(attr.value, attr.unit, null, null, doc.cellLength.w, null);
         }
     ),