Zrovna tvořím jeden web na Bricks, kde jsem objevil chybu v načítání CSS u gradientu a bluru. Web je černý, kde na některých místech rozzařuji okolí. Daný efekt vypadá nějak takto:
Do struktury HTML jsem vložil div, nastavil mu class a přidal následující CSS.
.ap-glow-medium {
width: 160px;
height: 160px;
background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 70%);
filter: blur(90px);
-webkit-filter: blur(90px); /* Oprava z 140px na 90px */
opacity: 0.6;
border-radius: 50%;
}Jenže jsem zjistil, že díky lazy loadu, který je v Bricks defaultně zapnutý, tak i na výkonném iphone 14 pro se tento prvek správně nevykresluje a působí to špatně. Ještě doplním, že na starém androidu (Xiaomi) to funguje správně, funguje to správně i na starším HP počítači. Na druhou stranu, na Macu mi to taky fachá, čili jediný problém je akorát i iphones, kde s tímto problémem se setkávám už poněkolikáté stejně tak, jakože například blbě čtou fixed backgroud, kde to právě skrze Ipnohes musím vypínat.
EDIT: Zároveň jsem otestoval, zda má nějaký vliv na funkčnost, když je na webu větší datová zátěž. Zkusil jsem z webu sundat všechna videa, pak jsem zase videa na web přidal (zhruba 30-40 MB dohromady) a vliv to nemělo na žádném zařízení. Čili za mě řešení viz níže.
Řešení je tedy buď vypnout lazy load na celém webu v nastavení Bricks nebo alespoň zvžšit hodnotu „Lazy load offset (px)“ z defaultních 300, na třeba 1000px. Toto řešení však bude mít vliv na výkon, čili to jde řešit ještě způsobem, že se do daného divu vloži atribut loading=“eager“. Tímto se lazyload na daném prvku vypne a pak to opět funguje tak, jak by mělo.
