fix: avoid .ASS-fix-font-size overflow

and some refactors

src/global.css

@@ -36,8 +36,14 @@
 .ASS-fix-font-size {
   font-size: 2048px;
   line-height: normal;
+  width: 0;
+  height: 0;
   position: absolute;
   visibility: hidden;
+  overflow: hidden;
+}
+.ASS-fix-font-size span {
+  position: absolute;
 }
 .ASS-fix-objectBoundingBox {
   width: 100%;

src/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import { compile } from 'ass-compiler';
+import { setKeyframes } from './renderer/animation.js';
 import { $fixFontSize } from './renderer/font-size.js';
 import { clear, createResize, createPlay, createPause, createSeek } from './internal.js';
 import { createSVGEl, addGlobalStyle } from './utils.js';
@@ -144,6 +145,10 @@ export default class ASS {
     this.#resize();
     this.resampling = resampling;
 
+    dialogues.forEach((dialogue) => {
+      setKeyframes(dialogue, styles);
+    });
+
     const observer = new ResizeObserver(this.#resize);
     observer.observe(video);
     this.#store.observer = observer;

src/internal.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import { renderer } from './renderer/renderer.js';
-import { setKeyframes } from './renderer/animation.js';
 import { batchAnimate } from './utils.js';
 
 export function clear(store) {
@@ -93,7 +92,7 @@ export function createPause(store) {
 }
 
 export function createResize(that, store) {
-  const { video, box, svg, dialogues } = store;
+  const { video, box, svg } = store;
   return function resize() {
     const cw = video.clientWidth;
     const ch = video.clientHeight;
@@ -134,10 +133,6 @@ export function createResize(that, store) {
     svg.style.cssText = cssText;
     svg.setAttributeNS(null, 'viewBox', `0 0 ${sw} ${sh}`);
 
-    dialogues.forEach((dialogue) => {
-      setKeyframes(dialogue, store);
-    });
-
     createSeek(store)();
   };
 }

src/renderer/animation.js

@@ -99,7 +99,7 @@ function createTransformKeyframes({ fromTag, tag, fragment }) {
 }
 
 // TODO: accel is not implemented yet, maybe it can be simulated by cubic-bezier?
-export function setKeyframes(dialogue, store) {
+export function setKeyframes(dialogue, styles) {
   const { start, end, effect, move, fade, slices } = dialogue;
   const duration = (end - start) * 1000;
   const keyframes = [
@@ -111,7 +111,7 @@ export function setKeyframes(dialogue, store) {
     Object.assign(dialogue, { keyframes });
   }
   slices.forEach((slice) => {
-    const sliceTag = store.styles[slice.style].tag;
+    const sliceTag = styles[slice.style].tag;
     slice.fragments.forEach((fragment) => {
       if (!fragment.tag.t || fragment.tag.t.length === 0) {
         return;

src/renderer/clip.js

@@ -1,4 +1,4 @@
-import { createSVGEl, uuid, vendor } from '../utils.js';
+import { createSVGEl, uuid } from '../utils.js';
 
 export function createClipPath(clip, store) {
   const sw = store.scriptRes.width;
@@ -34,7 +34,7 @@ export function createClipPath(clip, store) {
   store.defs.append($clipPath);
   return {
     $clipPath,
-    cssText: `${vendor.clipPath}clip-path:url(#${id});`,
+    cssText: `clip-path:url(#${id});`,
   };
 }
 

src/renderer/dom.js

@@ -125,7 +125,6 @@ export function createDialogue(dialogue, store) {
   if (dialogue.keyframes) {
     animations.push(initAnimation($div, dialogue.keyframes, animationOptions));
   }
-  dialogue.animations = animations;
   $div.append(df);
-  return $div;
+  return { $div, animations };
 }

src/renderer/font-size.js

@@ -2,14 +2,16 @@
 
 export const $fixFontSize = document.createElement('div');
 $fixFontSize.className = 'ASS-fix-font-size';
-$fixFontSize.textContent = '0';
+const $span = document.createElement('span');
+$span.textContent = '0';
+$fixFontSize.append($span);
 
 const cache = Object.create(null);
 
 export function getRealFontSize(fn, fs) {
   if (!cache[fn]) {
     $fixFontSize.style.fontFamily = `font-family:"${fn}",Arial;`;
-    cache[fn] = fs * 2048 / $fixFontSize.clientHeight;
+    cache[fn] = fs * 2048 / $span.clientHeight;
   }
   return cache[fn];
 }

src/renderer/renderer.js

@@ -6,8 +6,8 @@ import { setTransformOrigin } from './transform.js';
 import { getScrollEffect } from './scroll.js';
 
 export function renderer(dialogue, store) {
-  const $div = createDialogue(dialogue, store);
-  Object.assign(dialogue, { $div });
+  const { $div, animations } = createDialogue(dialogue, store);
+  Object.assign(dialogue, { $div, animations });
   store.box.append($div);
   const { width } = $div.getBoundingClientRect();
   Object.assign(dialogue, { width });

src/utils.js

@@ -37,19 +37,6 @@ export function createSVGEl(name, attrs = []) {
   return $el;
 }
 
-function getVendor(prop) {
-  const { style } = document.body;
-  const Prop = prop.replace(/^\w/, (x) => x.toUpperCase());
-  if (prop in style) return '';
-  if (`webkit${Prop}` in style) return '-webkit-';
-  if (`moz${Prop}` in style) return '-moz-';
-  return '';
-}
-
-export const vendor = {
-  clipPath: getVendor('clipPath'),
-};
-
 const GLOBAL_CSS = '__GLOBAL_CSS__';
 /**
  * @param {HTMLElement} container