Почему мне нужно указать «filter: blur (0)» для элемента видео, когда я помещаю другой элемент div поверх него? - PullRequest
Новая
       25

Почему мне нужно указать «filter: blur (0)» для элемента видео, когда я помещаю другой элемент div поверх него?

0 голосов
/ 02 апреля 2019

Я хочу добавить настраиваемую панель «Элементы управления» в нижней части видеоэлемента.

Я достигаю этого, просто переводя элементы управления «div» вверх по оси Y.

Однако, когда я делаю это, я замечаю, что видео слегка искажается, но очень очевидно.После долгих часов слепого поиска решений подобных проблем я наткнулся на одну, которая работает, но для меня это не имеет смысла:

https://stackoverflow.com/a/28565387/4402537

Все, что мне нужно было сделать, это установить filter: blur(0) на моемвидео элемент.Но мне интересно, почему такая функция присутствует по умолчанию.

Я приложил несколько видеороликов, чтобы проиллюстрировать эту проблему.Обратите внимание на контрастные линии при наведении на видео и обратно.

* Обратите внимание, что вам может потребоваться сделать видео очень большим или очень маленьким, чтобы усилить этот эффект. *

Вот jsfiddle , иллюстрирующий проблему.

Для удобства я также выложу следующий код:

index.js

const src = 'https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-black-and-white-hypnotic-spiral-seamless-loop_bhln6ze4m__PM.mp4'

class App extends React.Component {  
  render() {
    return (
        <div className="video-wrapper">
        <video src={src} className="video" />
        <div className="controls">
          <button className="button">
            <svg viewBox="0 0 36 36" className="icon">
              <path d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z">
              </path>
            </svg>
          </button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.querySelector("#app"))

index.sass

.video {
  width: 100%;
  height: 100%;
  display: block;

  /* This fixes the jaggedness/blurring/movement */
  /* filter: blur(0); */

  &:hover + .video-bottom {
    visibility: visible;
  }
}

.controls {
  height: 36px;
  color: white;
  visibility: hidden;
  transform: translateY(-100%);
}

.button {
  width: 46px;
  height: 100%;
}

Редактировать: Это похоже на хром.Я подозреваю, что это ошибка в браузере.

Chrome 73.0.3683.86 (64-разрядная версия)

...