background-cover разбит на Android Chrome, на этой веб-странице (только?) - PullRequest
0 голосов
/ 08 апреля 2020

Хотя у меня есть css правил с background-cover, которые хорошо работают в Chrome для Android, почему-то те же самые правила не работают на этом конкретном сайте

Странная вещь в том, что если я вставлю то же самое правило background-image: url(backgrounds/landing-two.jpg); для Dev Tools, оно не работает, но если я уберу галочку (оставив исходное), то увижу, что оригинальное правило работает

Сайт https://kuworking-theme-landing-two.netlify.com/

Что может происходить?

    background-blend-mode: var(--theme-ui-colors-backgroundimg__mode,unset);
    transition: all 0.5s ease 0s;
    background-size: cover;
    display: grid;
    -webkit-box-align: center;
    align-items: center;
    justify-items: center;
    height: 100%;
    width: 100%;
    background-image: url(backgrounds/landing-two.jpg);
    background-position: center center;
    transition: opacity 0.5s ease-in 0s;
    background-repeat: no-repeat;

animated gif of the behavior

1 Ответ

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

Это было эзотерически решено удалением правила transition: all 0.5s ease; (это устанавливается в контексте styled-components)

...