Блогът на Гонзо

SVG filters and CSS animations don’t play together well in WebKit

There is one particular day in my life that went into reading everything I could find about applying SVG filters on HTML content in Webkit/Blink and pulling my hair why didn’t my code work. See, I had an element with a SVG filter applied as a URI reference and the filter didn’t appear in Chrome and Opera. I tryed embedding the filter definition into the HTML – didn’t work, I tryed recreating the filter with the filter functions available in CSS – could’t create the same effect, but filters did work. Thet I noticed that the filters shows up while the JavaScript is loading, and after disabling JS throu DevTools the filter was there. And after toggling every single piece of JavaScript on the website on and off I managet to pinpoint the cause of my trobbles – a function that applied a class to the body that triggered an animation on a element that is siblink to the one with the SVG filter applied. Then I remembered reading about Chrome not using the GPU for SVG filters applied with URI, but using it for the shortcut functions in CSS. And then I knew – when applying the animation, Chrome rendered the whole container with the GPU and the SVG filter disappeard. And I did try to use 2d functions for the animation, but Chrome still used the GPU and broke the filter. So, if you ever try to use complex SVG filters together with CSS animation, be prepared for trouble!

I know what you did onbeforeunload

There are a couple of questions on StackOverflow about distinguishing download links in onbeforeunload event handler, the usual use case being skipping loading animation. The simple solution is to use the download attribute on the link itself, but this can’t […]

Responsive header images with WordPress

Големите картинки, заемащи почти целия екран от доста време са на мода, но освен да впечатляват потребителя, те могат и доста да го изнервят докато чака да се заредят. Проблемът става съвсем явен когато потребителя разглежда сайта на екрана на […]

Валидиране на форми в браузъра

В тази статия ще се опитам да ви покажа как лесно да направите валидация на форми с HTML5. Не че няма сигурно хиляди модули за всяка възможна библиотека или фреймуърк, обаче те ще ви наложат техния интерфейс и начин на […]

Self-initialising Module Pattern

Доста време не съм писал в блога, предишната публикация е от преди повече от две години. Смятам обаче да променя това и сега ще се опитам да ви покажа до какъв design pattern достигнах, работейки по един проект. Въпросният проект […]

Качване на файлове с cURL към Lighttpd

Днес се сблъсках с един проблем, решението на който, макар и лесно, въобще не беше очевидно. Трябваше да направим така, че когато потребителя изпрати файл към сървъра, PHP да го изпрати на друг сървър, на който инструмент, написан на Java, […]

Web Widgets – уеб приложения за инсталиране

От известно време се интересувам от възможностите да се създават приложения за мобилни устройства с помощта на отворени уеб стандарти. Разнообразието от платформи за мобилни устройства е доста по-богато отколкото за настолни системи, което прави създаването на приложения за всички […]

Анатомия на едно мобилно уеб приложение, част трета: JavaScript Event Driven Architecture

Това е третата публикация, в която разказвам как направих клиент за Foursquare използвайки само уеб технологии. В първите две разказах как работи GeoLocation API в съвременните браузъри и как не се справих в разбирането на oAuth. В тази публикация ще […]

Responsive web design – защо критиците му просто не схващат идеята

Поводът да напиша това е размяната на няколко съобщения в Twitter с Константин Данков след като той сподели една статия от миналата година. Откакто Итън Маркот описа приложението на CSS media queries за създаване на уеб-сайтове, подходящи за всякакви екрани […]

Анатомия на едно мобилно уеб приложение, част втора: oAuth и FourSquare API

В предишната публикация ви разказах как с помощта на GeoLocation API можете да установите местоположението на потребителя. В тази публикация ще се опитам да ви разкажа как се справих със следващата стъпка към създаването на приложение за FourSquare. Както всяка […]