1

My html page uses some animations and css mask properties.

When hosted with either liveserver or localhost, everything works fine.

however, whenever i just double click the index.html page, my mask image is not showing for some reason, and i struggle to understand why... the path seems correct on the inspector

any ideas what could be the issue? cheers

.bg .halo {
  border-radius: 50%;
  -webkit-mask-image: url(./assets/mask.svg);
  mask-image: url(./assets/mask.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 70% 70%;
  mask-position: 0 0;
  mask-size: 70% 70%;
  animation: halo infinite 10s linear;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179, 1, 0, 0) 0%, #e20025 100%);
  background-color: var(--bg);
  background-blend-mode: soft-light;
}

i'm using relative path but it just wont work if not hosted

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
alexis
  • 21
  • 2
  • Could it be that when you're running it on a server (I presume that's what you mean when you say "hosted") the URL paths are correct (with the period meaning "in this directory") but when you open the file in the browser from your file system the path is no longer valid to reach the desired file? – Bobulous Mar 23 '22 at 21:57
  • after more testing i ended up with the conclusion the path are correct (tried using it as background image with same path) the issue seem to come from -webkit-mask but i cant understand why it would behave differently when i open the file directly – alexis Mar 23 '22 at 22:01

0 Answers0