Search code examples
javascriptandroidcssgoogle-chromebackground-image

background-cover is broken in Android Chrome, in this web page (only?)


While I have css rules with background-cover that work well in Chrome for Android, somehow the very same rules fail in this particular website

The weird thing is that if I paste the same background-image: url(backgrounds/landing-two.jpg); rule on the Dev Tools, it doesn't work, but if I uncheck it (leaving the original one) then I can see the original rule working

The site is https://kuworking-theme-landing-two.netlify.com/

What can be happening?

    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


Solution

  • It has esoterically been solved by removing a transition: all 0.5s ease; rule (this is set in a styled-components context)