Фоновый линейный градиент не изменяется в реальном времени в элементе div - PullRequest
Новая
       51

Фоновый линейный градиент не изменяется в реальном времени в элементе div

0 голосов
/ 10 января 2019

Эта проблема возникает в Chrome, но не в Safari. Надеюсь, что есть решение.

Прокрутка <div>, когда элемент имеет линейно-градиентный фон, элемент не обновляется в режиме реального времени. Он обновляется только после того, как ваша мышь покидает <div> и возвращается.

Я ожидаю, что фон в <div> изменится при прокрутке. Высота градиента фона должна превышать высоту элемента div, поэтому при прокрутке вы видите больше градиента.

Вот ссылка на CodePen с проблемой. https://codepen.io/brady-brown/live/XoPKJZ

<div class="tipPageSearchButtons">
<div class="tipPageButtons" id="tipPageButtons">
  <div class="tipButton">
    TEST
  </div>
  <div class="tipButton">
    New button
  </div>
  <div class="tipButton">
    Another
  </div>
  <div class="tipButton">
    Keeps going
  </div>
  <div class="tipButton">
    cheers
  </div>
  <div class="tipButton">
    this is a button
  </div>
  <div class="tipButton">
    tips
  </div>
</div>


.tipPageButtons {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 35%;
  overflow-y: scroll;
  box-shadow: 0px 0px 10px 0px gray;
  border-radius: 4px;
  background: -webkit-linear-gradient(top, #712EBD,#00A8C6);
  background: linear-gradient(to bottom, #712EBD,#00A8C6);
  background-attachment: local;
}

.tipButton {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
  height: 30px;
  color: #FFF;
  width: auto;
  border: none;
  padding: 6px 10px 6px 10px;
  user-select: none;
}

.tipButton:hover {
  border: 1px solid black;
}

.tipButton:active {
  background: transparent;
}

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Работает у меня нормально, проверено в Chrome. попробуйте это в приватной ветке chorm (Ctrl + Shift + N)

0 голосов
/ 10 января 2019

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

...