title: Background linear-gradient with rgba does not show up in google chrome android but works fine in chrome desktop
body: <p>I used <a href="https://cssgradient.io/" rel="nofollow noreferrer">cssgradient.io</a> to generate a liner-gradient which is half transparent, the code works fine in Firefox mobile, and chrome desktop but the linear gradient does not work on chrome android mobile application. The div name is <code>gradient-patch</code> that is overlays on top of the video</p>
  
  <p>I am using video js plugin for hls support in my video. 
  Here is the <a href="https://jsfiddle.net/8xk46p3a/3/" rel="nofollow noreferrer">fiddle link</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link
     href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&amp;display=swap"
     rel="stylesheet"
    /&gt;
    &lt;link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" /&gt;
  
    &lt;!-- If you'd like to support IE8 (for Video.js versions prior to v7) --&gt;
    &lt;script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
  
    &lt;div class="container"&gt;
     &lt;!-- Video Container --&gt;
     &lt;div class="video-container"&gt;
      &lt;video
       width="500"
       height="500"
       preload="auto"
       class="video videojs"
       id="video"
       autoplay = "true"
      &gt;
       &lt;source
        src="https://bs-hls-video-output.s3.ap-south-1.amazonaws.com/video-quiz/index.m3u8"
        type="application/x-mpegURL"
       /&gt;
      &lt;/video&gt;https://jsfiddle.net/8xk46p3a/3/#
      &lt;div class="gradient-patch"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- Question --&gt;
     &lt;div class="question-cotainer question-active"&gt;
      &lt;div class="question-index"&gt;Question :&lt;/div&gt;
      &lt;div class="question"&gt;
       What is the capital of India ?
      &lt;/div&gt;
      &lt;div class="options"&gt;
       &lt;div class="option"&gt;
        Kerala
       &lt;/div&gt;
       &lt;div class="option"&gt;
        Delhi
       &lt;/div&gt;
       &lt;div class="option"&gt;
        Bangalore
       &lt;/div&gt;
       &lt;div class="option"&gt;
        Pune
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://vjs.zencdn.net/7.7.5/video.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*,
  *::before,
  *::after {
   margin: 0;
   padding: 0;
  }
  
  body {
   background-color: #0d223d;
   color: white;
   font-family: "Roboto", sans-serif;
  }
  
  .container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
  }
  
  .video-container {
   overflow: hidden;
   display: block;
   position: relative;
   max-width: 500px;
  }
  
  .video {
   margin: 0 auto;
   display: flex;
   justify-content: center;
   width: 100%;
   z-index: 100;
  }
  
  /* Question */
  
  .question-cotainer {
   display: none;
  }
  
  .question {
   font-size: 28px;
   text-align: center;
   margin: 1rem;
  }
  
  .question-index {
   margin: 1rem;
   text-align: left;
   font-weight: 700;
  }
  
  /* Options */
  
  .options {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
  }
  
  .option {
   background-color: #143571;
   padding: 0.6rem 3rem;
   margin-bottom: 1rem;
   border-radius: 50px;
   font-size: 22px;
   cursor: pointer;
  }
  
  .option:hover {
   background-color: #2356b4;
  }
  
  .modal {
   background-color: #fff;
   width: 100vw;
   height: 100vh;
   position: fixed;
   display: none;
   z-index: 10;
  }
  
  .btn {
   border: 0;
   padding: 1rem 3rem;
   border-radius: 5px;
   color: white;
   cursor: pointer;
  }
  
  .btn-primary {
   background-color: #2356b4;
  }
  
  .abs-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }
  
  .modal-active {
   display: block;
  }
  
  .question-active {
   display: block;
  }
  
  .gradient-patch {
   width: 500px;
   height: 100px;
  
   position: absolute;
   z-index: 5;
   bottom: 0;
  
   background: rgb(13, 34, 61);
   background: linear-gradient(
    0deg,
    rgba(13, 34, 61, 1) 0%,
    rgba(13, 34, 61, 0) 100%
   );
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var player = videojs("video");
   player.play();
  </code></pre>