Bricks: Problém s načítáním gradientu a bluru

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.

.glow-medium {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0.7) 70%);
  filter: blur(90px);
  -webkit-filter: blur(90px);
  opacity: 0.8;
  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.

150 150 Adam Pražan

Adam Pražan

Tvořím weby, reklamy a dělám komplexní marketing. Specializuji se na menší lokální projekty, kterým pomáhám od A do Z. Podniká se semnou dobře. Jsem přátelský, zodpovědný, samostatný a držím dohodnutou cenu.

All stories by : Adam Pražan

Leave a Reply