Website is not displayed properly in safari

hi there!

i’ve built my portfolio website with kirby cms. when i open the page in firefox everything works fine, but with safari the whole page is color-inverted and there is only the top part of the website visible… when i then click on an random element, the rest gets visible too…

the link of my website: https://cianjochem.ch/

i’m sorry to ask such an unspecific question, but i couldn’t find any bug in my website…
if you could have a look on it, i would be really thankfull!

I’d say there is an issue with your JavaScript, nothing Kirby related. If you look at the page source, you will see that everything is there, just not visible. Also, I see that fonts are not loaded.

1 Like

Hi there,
I just stumbled over your question and since I experienced some strange bahaviours in Safari, I thougt I take a quick look. First of all it’s really not Kirby related, it’s just CSS. I don’t know what it’s good for but you have set mix-blend-mode: difference, if you disable it in the Inspector, the content is displayed.

You also should take a look at your webfonts and there is a lost closing div-Tag in Line 39 of your sourcecode.

I hope this helps
cheers
tom

1 Like

hi tom!

thank you very much, you are great! i would never have found this bug…
I have a second problem with the displaying, but in chrome… a certain tag in the vimeo iframe is displayed in chrome in the top left corner, above the accordion… so the access to the accordion is not possible and it opens the video in fullscreen instead of the accordion content…
if you could take another look at it would be amazing!

cheers
cian

Ok, this is a strange one… I don’t see any icon or something, but I can (sometimes???) reproduce the bug. I can’t promise you anything, but I take a closer look later. It must be something with the positioning.

I’ll get back to you