Problem z pozycjonowaniem 2

Question

Szybki update do poprzedniego pytania ( https://forum.pasja-informatyki.pl/560383/problem-z-pozycjonowaniem-w-html ). Okazuje się, że problem z pozycjonowaniem powoduje efekt rozmycia w nadrzędnym divie.

A więc moje pytanie brzmi: czy to normalne, że jeśli jakiś obiekt ma w css wskaźnik:

backdrop-filter: blur(25px);

to obiekty, które znajdują się wewnątrz niego, nie mogą mieć ani tego wskaźnika, ani nie mogą być pozycjonowane poprzez position: fixed, ponieważ z jakiegoś powodu się to psuje? I jeśli tak, to z jakiego powodu się tak dzieje i czy da się temu jakoś zapobiec?

Comments

Na tym "kawałku" kodu dalej działa.

<div
class="Aplikacja2"
>
                          
    <div
    class="PrzestrzeńP2 K1 PositionPowiadomienie"
    >
                              
        <div
        class="IkonaP2"
        >
                                  
            <img
            src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Rock.png"
            >
                                  
        </div>
                                  
        <div
        class="StrefaP2"
        >
                                      
            <div
            class="NazwaP2"
            >
                                      
                Amadeusz W.
                                          
            </div>
                                      
            <div
            class="TreśćP2"
            >
                              
                Telefon
                                  
            </div>
              
        </div>
                                  
        <div
        class="Ikona2P2 K13"
        >
                                  
            <img
            src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Wiadomość.png"
            >
                                  
        </div>
                              
        <div
        class="Ikona2P2 K14"
        >
                                  
            <img
            src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Odrzuć.png"
            >
                                  
        </div>
                              
        <div
        class="Ikona2P2 K15"
        >
                                  
            <img
            src="Menu/Powiadomienia/Typy powiadomień/Połączenie przychodzące/Odbierz.png"
            >
                                  
        </div>
                                  
        <div
        class="Clear"
        >
        </div>
                              
    </div>
                                  
    <div
    class="Aplikacja K2"
    >
                          
        <img
        src="Foldery/Zwykły.png"
        >
                                  
        <div
        class="Nazwa"
        >
                                  
            Centrum
                                  
        </div>
                                  
    </div>
                                  
</div>
 
<!-- ******************************************************* -->
 
<div
class="Aplikacja2"
>
                      
    <div
    class="PrzestrzeńP4 K11 PositionPowiadomienie"
    >
                      
        <div
        class="UrządzenieP4"
        >
                          
            <img
            src="Menu/Powiadomienia/Typy powiadomień/Nowe urządzenie/G604.png"
            >
                          
        </div>
                          
        <div
        class="StrefaP4"
        >
                              
            <div
            class="TytułP4"
            >
                              
                Wykryto w pobliżu nowe urządzenie:
                                  
            </div>
                              
            <div
            class="TytułP4"
            >
                              
                <b>Logitech G604 LIGHTSPEED</b>.
                                  
            </div>
                              
            <div
            class="TreśćP4"
            >
                              
                Kliknij, aby połączyć.
                                  
            </div>
                              
        </div>
                              
        <div
        class="SymbolP4 K12"
        >
                          
            <img
            src="Menu/Powiadomienia/Symbole/Zamknij2.png"
            >
                              
        </div>
                          
        <div
        class="Clear"
        >
        </div>
                      
    </div>
                          
    <div
    class="AplikacjaM2 K2"
    >
                          
        <img
        src="Aplikacje/34.png"
        >
                          
    </div>
                          
    <div
    class="Clear"
    >
    </div>
                  
</div>

body {
  background-image: url(https://picsum.photos/1500/1500/?random=2);
  background-size: cover;
  background-repeat: no-repeat;
}
.PositionPowiadomienie
{
    position: fixed;
    top: 121px;
    right: -500px;
    z-index: 100;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: all 1s cubic-bezier(0.5, 0, 0.25, 1);
}
  
.Aplikacja2:hover > .PositionPowiadomienie
{
    right: 15px;
}
 
 
/* dodane dla demonstarcji */
.Aplikacja2 {
  border: 2px solid green;
  margin: 1em 0;
}

 

---

Właśnie wiem, bo okazuje się, że problem nie leży w samym kodzie powiadomienia, a tym gdzie ono się znajduje. Jeśli jest ono w jakimkolwiek divie, to nie ma problemu, do momentu, aż nie ma on klasy, która nadaje mu efekt blura. W sensie jeśli div, w którym znajduje się powiadomienie ma wskaźnik backdrop-filter: blur(25px);, to automatycznie powiadomienie przestaje się pozycjonować poprawnie oraz traci efekt blura

---

Może problem jest bo ta właściwość css (backdrop-filter) nie jest jeszcze dobrze "obsługiwana" przez przeglądarki. Może na razie zrezygnuj z tego efektu lub spróbuj zastosować "podobny", ale w pełni wspierany.

 

P.S. Pod wskazanym linkiem, są pokazane trick-y css zbliżone funkcjonalnością do backdrop-filter -  Apply a Filter to a Background Image