iOS scrolling bug

interface

When Apple released iOS 5 last year, one of the improvements included in Mobile Safari was the inclusion of support for scrolling of block elements with the CSS overflow:auto oroverflow:scroll declarations. In addition, support for fancy and fast bounce-scroll behavior is provided with the inclusion of the -webkit-overflow-scrolling: touch vendor-specific declaration.

The inclusion of scrolling on clipped elements is great and goes a ways towards making it much easier to layout HTML5 pages and apps in a consistent manner, and closes the gap a bit between web and native behaviors. And it’s easy to implement.

For example, to add scrolling on an element with class="scrolling-element":

.scrolling-element {
   overflow: auto; /* or overflow: scroll, if that's your thing */
   -webkit-overflow-scrolling: touch;
}

Fast scrolling, broken rendering

Unfortunately, Apple released a buggy implementation of -webkit-overflow-scrolling: touch. The problem is seems pretty awful at first: if you use the new native scrolling behavior on elements that use or contain children withposition:relative, you may end up with some pretty gnarly rendering areas. This is particularly true for stuff that gets rendered off-screen.

Lucky for us, there is relatively (ahem) painless workaround. If you force Mobile Safari to use hardware acceleration when drawing the positioned elements, the rendering errors disappear. How do you do that? With a little 3D magic, via a no-move translation with this declaration: -webkit-transform: translate3d(0,0,0). Sprinkling this 3D fairy dust on your elements with position:relative and your rendering issues will vanish.

.scrolling-element-class {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}

.scrolling-element-class .child-element {
   position: relative;
   -webkit-transform: translate3d(0,0,0);
}

One thing I have found is that sometimes, you need to apply the hardware acceleration hack to all of the child elements inside the scroller. This turned out to be true on a very complicated faux table in our really big HTML5 iPad app. The solution there was to use a scope universal selector. This isn’t the most performant selector, but it gets the job done in a way that working with the individual elements just didn’t cut it.

.scrolling-element-class * {
   -webkit-transform: translate3d(0,0,0);
}

Update: I have found since writing this that even the hardware acceleration hack doesn’t cure all rendering ills. On the aforementioned complex layout, which for various reasons mimics a table, some of the elements in the cells were rendering incorrectly even with translate3d(). The solution in this case was to fix the height of the elements. This is not ideal in all situations, of course, and I’ll be looking for alternatives in the future. Also, iOS 5.1 does not appear to fix the scrolling issues.

Кроссдоменный AJAX

На вопрос, как сделать AJAX запрос к другому домену, я всегда отвечал, что никак, и предлагал в качестве альтернативы jsonp, прокси, флеш, фреймы. Но, оказывается, большинство современных браузеров (IE8+, FF3.5+, Chrome 6+ и Safari 4+) вполне поддерживает кроссдоменный XMLHTTPRequest.

С клиентской стороны все остается без изменений. Только теперь браузер не блокирует запрос при отправке, а добавляет к нему заголовок с именем домена, откуда делается запрос: Origin: example.com

Ответ от сервера он так просто назад не пропускает, сервер должен добавить специальный заголовок: Access-Control-Allow-Origin: *
Вместо звездочки сервер может указать конкретный домен, которому разрешено получить ответ.

Вот такое элегантное решение. Без лишних HTTP запросов, без изменения клиентского API, без нарушения безопасности существующих приложений (ведь подгрузить картинку с другого домена или отправить форму в ифрейм можно было и раньше), и наконец, в отличие от Флеша, с гибкой настройкой прав доступа к индивидуальным страницам.

Спецификация CORS (англ.)
Поддержка в браузерах (англ.)
Соображения безопасности (англ.)
easyXDM — альтернативное решение, работает без Флеша во всех браузерах

Continue reading «Кроссдоменный AJAX»

ASP.NET MVC

Оглавление

Проблема с масштабом в стоковых браузерах на Galaxy S3 и HTC

Сегодня столкнулся с проблемой, когдастнадартный браузер на Samsung Galaxy и HTC не правильно масштабирует страницу. Проблема решилась с помощью мета-тега viewport.

 

    <meta name="viewport" content="width=640, user-scalable=1">
    <script language="JavaScript">
        var uagent = (window.navigator) ? navigator.userAgent.toLowerCase() : false;
        if(uagent && uagent.indexOf('4.0 mobile') > 0){
            viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'width=640, initial-scale=0, user-scalable=1');
        }
    </script>

Хорошая статья про viewport

Событие «клик» на iPhone

Сегодня столкнулся с проблемой, когда iPhone не понимает событие click (click срабатывает при двойном нажатии на элемент). На этот счет гугл выдал довольно много вариантов решения и как всегда подходящий я нашел на stackoverflow. На самом деле есть несколько вариантов решения этой рпоблемы (подключить сторонню библиотеку, например jQTouch, навесить на элемент стиль с cursor:pointer, хендлить события вручную…), но решение оказалось очень простым:

Вместо:

$(".element").on("click", function(e){
   alert("link clicked!");
});

Использовать:

$(".element").on("click touchstart", function(e){
   alert("link clicked!");
});

Установка LAMP для ленивых в Ubuntu 14.04

В Ubuntu Server 14.04 LTS есть отличная команда, которая позволяет веб-мастерам совсем и навсегда облениться. Ставим LAMP в одну строку:

sudo apt-get install lamp-server^

Крышка в конце названия «пакета» — не опечатка.

Для совсем ленивых предлагаю такое комбо:

sudo apt-get -y update && sudo apt-get -y upgrade && sudo apt-get -y install lamp-server^ && sudo apt-get -y install phpmyadmin

Новчикам поясню:

Ключ -y для apt-get за вас отвечает согласием на установку и обновление пакетов.

Связка && между командами, запускает следующую, если предыдущая отработала без ошибок.

Когда MongoDB падает

Во время работы MongoDB хранит .lock файл (/var/lib/mongodb/mongod.lock). Этот файл создается во время запуска MongoDb и удаляется при отключении. Бывает ситуация, когда рабочая машина выключается неправильно (например пропало питание), либо падает процесс MongoDb. В таком случае файл может быть не удален — присутсвие этого файла говорит о неправельности завершения работы MongoDb и она не сможет правильно запустится. Есть хорошее решение этой проблемы.

sudo -u mongodb mongod --repair --dbpath /var/lib/mongodb/
sudo service mongodb start

Grunt для чайников

Фронтенд-разработчикам часто советуют делать следующие вещи:

  • Работать с маленькими кусками CSS и JavaScript кода, насколько это имеет смысл, а затем объединять их для продакшена.
  • Сжимать CSS и минифицировать JavaScript с целью сделать файлы для продакшена как можно меньше по размеру.
  • Оптимизировать изображения, чтобы уменьшить размеры файлов без потерь в качестве.
  • Использовать Sass для написания CSS из-за всех полезных абстракций, которые он позволяет использовать.

Конечно, этот список далеко не полон, но это такие вещи, которые делать просто необходимо. Вы могли бы смело назвать эти советы задачами.

Бьюсь об заклад, вы наверняка уже что-то слышали про Grunt. Что ж, Grunt — это, по сути,планировщик задач. Grunt может делать все эти задачи за вас. Стоит лишь установить его, что, кстати, не так уж и сложно, и эти операции будут происходить автоматически, так, что вам про них даже не придётся вспоминать.

Но, давайте посмотрим правде в глаза. Grunt — одна из тех новомодных штук, которой пользуются все эти крутые парни, но которая на первый взгляд выглядит странно и пугающе. Я вас понимаю. И эта статья для вас. Continue reading «Grunt для чайников»

Оптимизация конфигурации СУБД

По мере развития сайта количество данных в БД будет расти, и возникнет необходимость изменений настроек базы данных. Чтобы обеспечить оптимальную работу сайта, желательно регулярно проверять, насколько оптимально настроена действующая конфигурация MySQL. Такую проверку проще всего осуществлять с помощью специальных скриптов, самым известным и популярным из которых является mysqltuner.pl. Его можно скачать при помощи следующих команд:

$ wget https://raw.githubusercontent.com/major/MySQLTuner-perl/master/mysqltuner.pl
$ chmod +x ./mysqltuner.pl
$ ./mysqltuner.pl

Этот скрипт собирает статистику MySQL и выдает рекомендации по улучшению существующих настроек.

MyISAM или InnoDB?

Самыми популярными движками в MySQL-базах являются MyISAM и InnoDB. Если движок выбран неправильно, то возникают проблемы с производительностью и консистентностью.
Рассмотрим особенности этих движков более подробно.

Continue reading «MyISAM или InnoDB?»