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;
It has esoterically been solved by removing a transition: all 0.5s ease;
rule (this is set in a styled-components
context)