Alexander Mischuk

Livereload — не лучшее решение. Лучше и быстрее работает Browsersync.
А вообще, советую не париться и заюзать TARS, там все из коробки есть и даже больше.

Итак, постараюсь ответить, пускай и топорно.
Конкретно причину возникновения багов с position: fixed при скролле я не знаю, хотя с ним и сталкивался частенько (но думается мне, что хром при скролле заново отрисовывает фиксированный элемент).
А фиксится он с помощью backface-visibility: hidden потому, что когда вы применяете к элементам свойства opacity/transform (и то что относится к трансформам, собственно backface-visibility), то браузер создает для этих элементов отдельный слой ?лэйаута? (не уверен в том, конкретно слой чего создается). И благодаря этому браузер не перерисовывает элемент заново при каждом скролл-ивенте (что убирает эффект моргания в хроме).

Довольно простой способ для оптимизированных шрифтов - использование base64 кодирования woff шрифта:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('embedded-opentype');
}

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.ttf') format('truetype'),
url(data:font/woff;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_В_BASE64) format('woff'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

woff на сегодняшний день поддерживается всеми браузерами, IE начиная с 9, Опера с 11

<div>
  <table></table>
</div>

div { overflow-x: auto;}
Логика ясна и понятно, что должно происходить?

codepen.io/vitaliy_kirenkov/pen/xBFsb Типо такого...

Как верно сказал DonSinDRom, "не хабром единым".

Гайд по поддержке CSS различными почтовыми клиентами - это, безусловно, хорошо, но в сети, прямо на поверхности, есть гораздо больше полезной информации, никто её не скрывает:

blog.mailchimp.com
https://www.campaignmonitor.com/blog/
https://litmus.com/community
zurb.com/ink
https://github.com/Omgitsonlyalex/ZenithFramework

Если Вы знаете, что такое Browsershots, то для тестирования email-рассылок Вам придётся по вкусу Litmus.

upd
Если нужна юзабельность карты только внутри круга, то в голову приходит только svg
codepen.io/iiil/pen/JpBaE
Зато заметьте, как работает отлично, карта работает только в области круга (а не приямоугольника), за счет все того же
pointer-events: none;который, как говорят, и был придуман в свое время для svg.
Кроме того, Вы можете сделать более сложный svg, к примеру, чтобы был доступ до объектов управления картой — вырезать окна для них.

codepen.io/iiil/pen/Bwhjq
С картой надо будет работать? Тогда как вариант: pointer-events: none;
Саму маску с помощью бордеров, или как тут указывали — с помощью радиального градиента и псевдообластей.
P.S. Учитывая несколько предложенных абсолютно разных вариантов — из Вашего рисунка все-таки не все понятно )

А как вы это себе представляете? Можете, например, открыть файл, скопировать код, в вашей верстке создать тег script, куда и поместить весь код библиотеки.

jsfiddle

//высота шапки 
var head_height = 50;

//ждем проверку на инвалидность
document.addEventListener('invalid', (function(){
    //флаг только для первого сообщения о неверных данных
    var is_first = true;
    return function(e){
        if(is_first){
            is_first = false;
            
            setTimeout(function(){
                //сбрасываем is_first чтобы еще раз можно было отправить пустые данные
                is_first = true;
                //верх лейбла инпута на странице экрана
                var etop = $(e.target).prev("label").offset().top;
                //верх лейбла относительно видимой части страницы
                var top = etop - $(window).scrollTop();

                //если верхушка скрывается за пределами экрана и шапки, то скролим к лейблу
                if (top < head_height) {
                    window.scrollTo(0, etop - head_height);
                }
            }, 9);
        }
    };
})(), true);

Есть переведённые курсы от lynda.com про git - если вам именно на русском надо
rutracker.org/forum/viewtopic.php?t=4782388

Но лучше в оригинале смотреть
rutracker.org/forum/viewtopic.php?t=4178341

Я вам ничего не давал и меня тут вообще не было.

jsfiddle.net/zD9NN/2

$(".img").hover(function () {
    $(this).parent().closest('.parent').addClass('hover');
});

$('.parent').on('mouseleave', function () {
    $(this).removeClass('hover');
});

$('.hover').on('mouseleave', function(){
    $(this).removeClass('hover');
});

Это? Или я задачу не понял.

PS:

// не надо так
// $(this).parent().closest('.parent').addClass('hover');
// вот так можно
$(this).parents('.parent').addClass('hover');

Хотелось бы увидеть код, чтоб выяснить в чём конкретно проблема. А пробовали сами писать код табов, дело-то нехитрое?

Есть вот такой вот callback - "onLeave"
jsfiddle.net/MuDvg/1

Все вы делаете так, но watch-таск делает очень много лишней работы. У вас он смотрит на директорию с исходниками и при изменении любого файла, запускает все таски, а не один нужный.

Для начала вам стоит разбить watch на таргеты для независимой компиляции разных типов файлов. Также у меня есть сомнения по поводу необходимости указывать таргет files у самого livereload - уберите его. Вот пример моего таска с livereload:

watch: {
  options: {
    livereload: true
  },
  gruntfile: {
    files: ['Gruntfile.js'],
    tasks: ['build:dev']
  },
  js: {
    files: '<%= path.assets %>/javascripts/{,**/}*.js',
    tasks: 'concat'
  },
  compass: {
    files: '<%= path.assets %>/stylesheets/{,**/}*.{scss,sass}',
    tasks: ['compass:dev', 'autoprefixer']
  },
  jade: {
    files: '<%= path.assets %>/views/{,**/}*.jade',
    tasks: ['jade:dev']
  }
}

Также не забудьте вставить скрипт для livereload в свой html:

<script src="//localhost:35729/livereload.js"></script>

Чем не нравится keyframes? Оно и работает плавнее, и систему грузит меньше.