Като цяло имам себе си за добър човек, който обича да помага на хората. Освен на хората, обичам да помагам и на програмистите, особено на тези, които прекарват голяма част от монотонния си и скучен живот в ровене из мистериозните и тайнствени дебри на собствения си код, който в повечето случаи е уютно местенце за един вид инсекти, които развиват своят хабитат, необезпокоявани, а дори в перфектна симбиоза с нищо неподозиращият разработчик. Говоря естествено за бъговете.

От самото си излизане, Google Chrome предизвика истинска истерия и доста (според мен) фалшиви, и ненужни овации (тук искам да вметна, че въпреки критичното ми отношение към Chrome, аз го слагам в графата „Добри браузъри“, като оставям горкият и измъчен Internet Explorer да се радва съмичък на страхотния си compatibility mode (от който наистина ме е страх!) в секцията „Изтръпнали браузъри“).

Различия между браузърите има и това е нормално. Обикновено един опитен front-end coder (като мен) знае често срещаните проблеми и  бързо се справя в аварийни ситуации. Наскоро обаче се сблъсках с проблем, който успя да подложи на тест не само моето собствено търпение, но и търпението на някои колеги, които също бяха въвлечени в това малко приключение.

Google Chrome + Flash + jQuery UI Draggable = възможни проблеми

Често се налага някъде в сайтовете да добавяме бутони за копиране на текст в буфера на компютъра (copy). Тази опция е забранена от браузърите (не може да се направи само с JavaScript) и един възможен начин да се постигне тази функционалност е използването на малък flash клип. Сигурно сте чували за проекта ZeroClipboard – това е JavaScript/Flash библиотека, която улеснява създаването на бутони за копиране на текст.

В един от последните проекти, с които се занимавах, трябваше да добавя копиране на текст в буфера на няколко места. Едно от тях беше в един draggable контейнер, който работи с jQuery UI Draggable. Същият такъв бутон имаше и на няколко други места, но те не бяха в draggable контейнери. Работя с Mozilla Firefox и там нямаше проблеми.

Еми… Нека тестваме под Chrome

В края на деня реших все пак да тествам под Google Chrome (като бях предубеден, че сериозни проблеми няма да имам, особенно такива, свързани с JavaScript). И изненада – бутонът за копиране на текст не работи под Chrome.

Демо, не работи под Google Chrome

Мина време в търсене на грешката, като бе необходима и намесата на опитен Flash разработчик, с който тествахме няколко часа. В края на крайщата открихме, че под Google Chrome, flash клипът губи фокус. Но защо? След търсене в интернет се натъкнах на тази тема. При наличието на много контейнери, елементи и т.н. (демото горе е много изчистена версия, съдържаща само точния сценарии на проблема) е трудно да разбереш, коя от всичките маймуни те замеря с банани. Оказа се, че възможността за влачене на родителския контейнер „разсейва“ Chrome от flash клипа и затова mouseDown събитието не се отчита.

Как поправихме проблема

Както е написано в посочената тема по-горе, добавихме изключение при влаченето – да не работи на контейнера, държащ flash клипа.

$('.draggable').draggable({ cancel: '.with-flash' });

Демо, което работи под Google Chrome

Заключение

Въпреки силно изразената ми антипатия към Google Chrome, бих казал, че този бъг е доста логичен и не е толкова странен. Нормално е при drag да се губи фокус от flash клипове (Вероятно Google Chrome е с по-голямо самочувствие от Flash).

Силно се надявам тази статия да помогне на някой, който се е сблъскал със същия проблем.