1

I have this issue on my website, but only when it's accessed by mobile and the first access on it. After the page is loaded, I toggle the dark mode and my images don't show up. However, when I refresh the page, the images shows normally.
That's the link for my website: https://hannahneves.github.io
The issue on my end (Android/Chrome): https://youtu.be/3zESMLQuOWc
Aparantely, the issue is related with Chrome Lite Mode. Because, when I deactivate Lite Mode the website works perfectly.

I made the dark mode toggle like this:

const html = document.querySelector('html');
const checkbox = document.querySelector('.switch');


let check;

(() => {

  check = localStorage.getItem('check');

  if(check) {
    html.classList.toggle('dark-mode');
  }

})();

checkbox.addEventListener('change', function(){

  check = html.classList.toggle('dark-mode');

  if(check == true) {
    localStorage.setItem('check', check);
  } else {
    localStorage.clear();
  }

});

And the images is uploaded using variables on CSS, like this:

:root {
--portfolio: url('/assets/LightMode/portfolio.svg');
}
.dark-mode:root {
--portfolio: url('/assets/DarkMode/portfolio.svg');
}

.portfolio-animation{
  background: var(--portfolio);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 267.5px;
  height: 182px;
  margin: 0 auto;
}
Hannah M Neves
  • 21
  • 4
  • 2
    I love your website! I don't see the issue on my end. I tried accessing your website on my desktop in responsive mode using the chrome dev tools, and on my android phone. I see the picture of you with red/blue UX on both my computer and phone, no issues. Could you provide a screenshot of what it looks like on your end? – ssbrear Apr 20 '21 at 02:51
  • Tyvm! :D On my end, looks like this: https://drive.google.com/drive/folders/1pCS7iyoY5jmc-J0dkyr3gu-k-Te_RVdL?usp=sharing If my website is loaded in dark mode, the issue happens when i toggle to light and vice versa. – Hannah M Neves Apr 20 '21 at 03:15
  • Interesting, I tried it on chrome, mobile mode but it do well. After I tried it on my real mobile device and it happens. – edisonthk Apr 20 '21 at 03:30
  • This is a longshot, but were both of you using IOS devices? Even if you are not using Safari on an IOS device (maybe you have Chrome downloaded as an App), I believe that the phone still processes the code differently than Chrome on a browser. This may be an issue with IOS/Safari? – ssbrear Apr 20 '21 at 03:32
  • @ssbrear I don't experience the problem on IPad IOS 14 - it's OK on both Safari and Chrome. – A Haworth Apr 20 '21 at 06:38
  • @ssbrear My mobile device is Android. My husband told me something interesting... the issue could be related with Chrome Lite Mode. If it is, can I solve this somehow? – Hannah M Neves Apr 20 '21 at 14:46

1 Answers1

1

I didn't find a specific solution for this issue, but I managed to solve my problem doing the pre-load image: Preloading CSS Images
Thank you all for being helpful and understanding!

Hannah M Neves
  • 21
  • 4