force gpu layers on subtitle overlays so chrome opacity bugs dont clip them

src/components/player/LibAssRenderer.tsx

@@ -86,6 +86,7 @@ export default function LibAssRenderer({ playerRef, subtitleUrl }: Props) {
     <canvas
       ref={canvasRef}
       className="absolute inset-0 w-full h-full pointer-events-none z-[100]"
+      style={{ transform: 'translateZ(0)', willChange: 'transform', backfaceVisibility: 'hidden' }}
       aria-hidden
     />
   )

src/components/player/SubtitleOverlay.tsx

@@ -145,7 +145,15 @@ export default function SubtitleOverlay({ playerRef, subtitleUrl }: Props) {
   if (activeCues.length === 0) return null
 
   return (
-    <div className={`${className} z-[100]`} style={style}>
+    <div
+      className={`${className} z-[100]`}
+      style={{
+        ...style,
+        transform: 'translateZ(0)',
+        willChange: 'transform',
+        backfaceVisibility: 'hidden',
+      }}
+    >
       {activeCues.map((cue, ci) => (
         <div key={ci} className={ci > 0 ? 'mt-1.5' : ''}>
           <span data-cue className="whitespace-pre-line">