Фоновый линейный градиент с rgba не отображается в google chrome android, но отлично работает на chrome рабочем столе - PullRequest
Новая
       0

Фоновый линейный градиент с rgba не отображается в google chrome android, но отлично работает на chrome рабочем столе

1 голос
/ 08 апреля 2020

Я использовал cssgradient.io для создания полупрозрачного линейного градиента, код отлично работает на мобильных устройствах Firefox и на настольном компьютере chrome, но линейный градиент не работает на chrome android мобильное приложение. Имя div gradient-patch, которое накладывается поверх видео

Я использую плагин video js для поддержки hls в моем видео. Вот скриптовая ссылка .

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link
   href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap"
   rel="stylesheet"
  />
  <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
 </head>
 <body>


  <div class="container">
   <!-- Video Container -->
   <div class="video-container">
    <video
     width="500"
     height="500"
     preload="auto"
     class="video videojs"
     id="video"
     autoplay = "true"
    >
     <source
      src="https://bs-hls-video-output.s3.ap-south-1.amazonaws.com/video-quiz/index.m3u8"
      type="application/x-mpegURL"
     />
    </video>https://jsfiddle.net/8xk46p3a/3/#
    <div class="gradient-patch"></div>
   </div>
   <!-- Question -->
   <div class="question-cotainer question-active">
    <div class="question-index">Question :</div>
    <div class="question">
     What is the capital of India ?
    </div>
    <div class="options">
     <div class="option">
      Kerala
     </div>
     <div class="option">
      Delhi
     </div>
     <div class="option">
      Bangalore
     </div>
     <div class="option">
      Pune
     </div>
    </div>
   </div>
  </div>
  <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
 </body>
</html>

CSS

*,
*::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%
 );
}

JS

var player = videojs("video");
 player.play();

1 Ответ

0 голосов
/ 08 апреля 2020

Если вы не используете пре / постпроцессор, который заботится о префиксах браузера, вы пытались добавить префиксы 

-webkit-
-o-
-moz-

в линейный градиент? например. 

background: linear-gradient(
  0deg,
  rgba(13, 34, 61, 1) 0%,
  rgba(13, 34, 61, 0) 100%
 );
background: -webkit-linear-gradient(
  0deg,
  rgba(13, 34, 61, 1) 0%,
  rgba(13, 34, 61, 0) 100%
 );
background: -o-linear-gradient(...);
background: -moz-linear-gradient(...);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...