Scusate, piccolo aggiornamento, che necessità di supporto CSS.

Eventualmente spostate nell'apposita sezione del forum o ditemi se devo aprire un nuovo topic.

Il codice ha subito delle modifiche, lo riporto di seguito:

codice:
jQuery(document).ready(function ($) {

    let imagesLoaded = 0;


    const images = [
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Accordo.webp',
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Strada.webp',
        'https://www.miosito.it/wp-content/themes/bonlawtemplate%2050/images/Tribunale.webp'
    ];


    // Imposta l'opacità solo all'inizio, quando siamo sulla homepage
    if (document.body.classList.contains('home')) {
        document.querySelector('#header_container').style.opacity = "0";
    }


    function imageLoaded() {
        imagesLoaded++;
        if (imagesLoaded === images.length) {
            // Inizializza il carousel prima di cambiare l'opacità del contenitore.
            initializeSlickCarousel();
            document.querySelector('.hero').style.opacity = "1";
            document.querySelector('#header_container').classList.add('slick-active');       
        }
    }


    images.forEach(imgUrl => {
        const img = new Image();
        img.src = imgUrl;
        img.onload = imageLoaded;
    });


    function initializeSlickCarousel() {
        $('.hero').slick({
            dots: true,
            infinite: true,
            speed: 800,
            pauseOnHover: false,
            fade: true,
            cssEase: 'linear',
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 7000,
            draggable: false,
            arrows: false
        });


        $('.hero').on('afterChange', function (event, slick, currentSlide) {
            if (currentSlide === 0) {
                $('.hero-slide').removeClass('fade-in-first-load');
                $('.ClasseTitolo').removeClass('primo-ciclo'); // Rimuove la classe dopo il primo ciclo
                $('.ClasseSottotitolo').removeClass('primo-ciclo'); // Rimuove la classe dopo il primo ciclo
            }
            if (currentSlide === 1) {  // Quando inizia la seconda slide (gli indici iniziano da 0)
                $(this).slick('slickSetOption', 'autoplaySpeed', 6000, true);
            }
        });
    }


});
Principalmente quello che è cambiato è questo: ho inserito questa stringa
codice:
 document.querySelector('#header_container').classList.add('slick-active');
che mi consente di aggiungere una classe all'elemento header_container al completo caricamento delle slide.

Questo l'ho fatto perché al caricamento vorrei realizzare un ulteriore effetto (oltre alla prima slide che appare in dissolvenza): ovverosia l'header_container (che contiene logo e menu del sito) che scende dall'alto verso il basso, con effetto dissolvenza.

Per fare ciò, lato css, ho inserito questo codice:
codice:
.home #header_container.slick-active {    animation-name: fadeInHeaderContainer;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
    animation-delay: 0.5s;
}


@-webkit-keyframes fadeInHeaderContainer {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }


  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes fadeInHeaderContainer {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }


  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


Funziona benissimo, se non fosse per un problema che si verifica SOLO su chrome.

All'intento dell'header_container come già specificato c'è il mio menu.
Nel menu c'è un submenu, il quale ha uno sfondo con effetto blur.
codice:
.header__menu .menu-item .sub-menu { letter-spacing: 1px; width: 395px; transform: translateX(-50%); left: 50%; position: absolute; margin-top: 30px; text-decoration: none; list-style-type: none; padding-right: 35px; padding-bottom: 12px; padding-top: 5px; padding-left: 15px;  font-size: 13px;background-color: rgba(233, 233, 233, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;

}


Su Chrome il blur non funziona più (mentre non da alcun problema su Firefox e Safari).

Ho provato ad eliminare il css con cui animo l'header_container o ad eliminare la stringa del JS con cui aggiungo la classe "slick-active": in entrambi i casi il blur torna a funzionare.

E' pertanto evidente che il problema si verifica quando si anima un elemento genitore dell'elemento col blur.

Ho fatto MILLE tentativi, ma non sono riuscito a risolvere in nessun modo.

Vi viene in mente qualche idea?

Grazie per il supporto!