fix(SUP-42112): Advanced Caption Settings not working in iOS (#773)

issue:
in advances captions settings for ios change background color and change
font size didn't applied

solution:
add font-size to css attribute
add background using gradient (due to known issue in ios) to css
attribute


resolve [SUP-42112](https://kaltura.atlassian.net/browse/SUP-42112)

[SUP-42112]:
https://kaltura.atlassian.net/browse/SUP-42112?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

src/track/external-captions-handler.ts

@@ -32,7 +32,7 @@ const VTT_POSTFIX: string = 'vtt';
 class ExternalCaptionsHandler extends FakeEventTarget {
 
   public static applyNativeTextTrackStyles(sheet: CSSStyleSheet, styles: TextStyle, containerId: string, engineClassName: string): void {
-    sheet.insertRule(`#${containerId} video.${engineClassName}::-webkit-media-text-track-display { text-align: ${styles.textAlign}!important; }`, 0);
+    sheet.insertRule(`#${containerId} video.${engineClassName}::-webkit-media-text-track-display { ${styles.webkitTextCSS()} }`, 0);
     sheet.insertRule(`#${containerId} video.${engineClassName}::cue { ${styles.toCSS()} }`, 0);
   }
 

src/track/text-style.ts

@@ -284,10 +284,17 @@ class TextStyle {
     attributes.push('font-family: ' + this.fontFamily);
     attributes.push('color: ' + TextStyle.toRGBA(this.fontColor, this.fontOpacity));
     attributes.push('background-color: ' + TextStyle.toRGBA(this.backgroundColor, this.backgroundOpacity));
+    attributes.push('font-size: ' + this.fontSize);
     attributes.push('text-shadow: ' + this.getTextShadow());
     return attributes.join('!important; ');
   }
 
+  public webkitTextCSS(): string {
+    const attributes: Array<string> = [];
+    attributes.push('text-align: ' + this.textAlign);
+    attributes.push(`background: linear-gradient(0deg, ${TextStyle.toRGBA(this.backgroundColor, this.fontOpacity)}, ${TextStyle.toRGBA(this.backgroundColor, this.fontOpacity)})`);
+    return attributes.join('!important; ');
+  }
   /**
    * clones the textStyle object
    * @returns {TextStyle} the cloned textStyle object