Pull to refresh

Comments 99

Круто, но gif картинка не меньше будет занимать? :)
Gif вам такой прозрачности не даст + добавит один запрос.
PNG & data/uri в CSS, не?
Анимировать PNG-шку? А какой выигрыш?
Не анимировать PNG-шку, а можно использовать APNG :)
Изменить цвет/размер/скорость и направление анимации в данном случае в разы проще. Так что сравнение с графикой неуместно.
APNG по прежнему не работает в webkit без костылей
1. 1 запрос который скешируется и на серверной стороне и на клиентской и больше не будет подгружаться, потому и на сервере он отдастся из памяти и на клиентской стороне тоже из памяти будет получатся
2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
3. «такая прозрачность» — имеются в виду размытые границы стрелки?
не работает в Google Chrome 20.0.1132.47 m Win7 (на минуточку, самый популярный браузер в мире ;)
временами мелькает стрелка, когда есть задержка с отрисовкой

в ФФ 12.0 работает

У меня эта же версия стоит, Win7 x64, всё прекрасно работает.
За слово sppiner, addblock+ может вырезать. Если бы оно просто не работало, были бы бордеры хотя бы.
«даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f»
адблока нет

и чуть выше — «временами мелькает стрелка, когда есть задержка с отрисовкой»

просто из-за постоянной перерисовки самой стрелки не видно.
Но вы понимаете, что проблема только у вас у одного персонально, а не у всего мира? Это ведь о чём-то говорит.
Не только у него. У меня ровно то же наблюдается (Chrome 20.0.1132.47 m, Win7×64). Плагинов нет, инкогнито-режим. Редко-редко моргает стрелочка, и всё.
А вы пробовали вручную запустить пример, без использования jsfiddle? Т.е. html-код скопировать в новый файл и запустить.
У вас блок вообще не отображается?
Тоже самая сборка и виндоус, всё отображается. Попробовал на нетбуке — отображается только часть кружочка, и стрелка мелькает. Сначала стал дулмать на аппаратное ускорение, но оно оказалось отключено и там и там. Не уж то зависит от видеокарты?
Вполне может не работать из за видео карты, точно такое встречалось с поддержкой transform3d, может и просто с transform тоже есть подобные проблемы.

Причем даже modernizr пока не умеет определять поддержку на уровне железа.
А вообще какие-то противоречия есть. Флаг для обработки цсс анимации на gpu в хроме есть, но он отключен. Но друго варианта, почему так происходит у меня нет.
А знаете, похоже, Вы правы. Проверил на другой машине с нормальным видео — всё крутится. А у меня древняя интеловская графика G31…

Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(
Ага. На нетбуке в другом браузере были видны фризы, когда в хроме анииация была плавная хотя и не всё отображалось.
В хроме есть about:flags, попробуйте там включать/отключать параметры:

«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»

Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
Я вчера это пробовал, по умолчанию у меня это почти всё отключено. Ни каких изменений, увы. На большом всё включал, и так и так хорошо, на нетбуке и так и так плохо. ТакИе дела :(
У меня то же самое, к сожалению.
Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.
У вас сам блок вообще не отображается. Проблема явно на вашей стороне.
В Опере скролл скачет. Впрочем, там часто что-нибудь скачет. :)
Странно, у меня не скачет, последняя 12 версия.
вам пишут 2 человека, что метод не работает как заявлено («работает во всех современных браузерах» ), а вы талдычите, что у вас работает.

с таким подходом ваш метод никому не нужен.
Прежде чем обвинять кого-то в криворукости, выровняйте свои руки ©
Вам человек багрепорт шлёт, а вы его минусуете…
Я никого не минусую из принципов. А баг есть только у этого человека, и не известно, что у человека ещё этого есть. )
Видите баг? А он есть.
Он есть не только у этого человека.
Но это не говорит о том, что автор виноват в чём-то. Раз на одинаковых системах, сборка хрома что-то работает по разному, значит стоит писать в баг терекер хрома, а не то, с каким фэ пишет IntenT.
UFO just landed and posted this here
Без аппаратного ускорения, какой-то глюк с появляющейся/исчезающей полосой прокрутки.
UFO just landed and posted this here
Opera Next последняя сборка, Ubuntu x64 — скачет однако! И объект вращения во время того, как скачет болтается влево-вправо.
Chromium хорошо работает.
В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
Так что не всё так хорошо, как было задумано.
Я чуть ниже ответил что есть такая проблема, всё зависит от конкретной реализации анимаций в браузере.
Странно, что в Opera на разных платформах (у вас же Win?) ведёт себя по разному, движок ведь один должен быть.
А так в топку такие эффекты, что они даже в одном браузере работают по разному.
Разработчикам, что ли скинуть ссылку на пример, пусть думают?
Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)
Открыл пример с jsfiddle — там Opera нормально работает (сглаживание самое приятное), а в FF всё-таки что-то с центрированием.
Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.
Размеры, цвета рамки.
UFO just landed and posted this here
Да, с обёрткой в разы проще становится.
Самое верное решение )
Угу, css animation себя ведёт вообще стрёмно. Делал открытку давно, тоже хотел заюзать, потом решил что пусть лучше будет transition и откопал свою старую тестовую либу.

artlark.ru/demos/8march/
Интересный пример, что за либа?
Ну это я громко сказал. ) Просто набор кусков кода, всякие эксперименты, всё на коленке писал, фор фан так сказать. Потом появились идеи, и собрал во что-то рабочее.
Ещё вот такие делал:
artlark.ru/demos/bubbles/
artlark.ru/demos/maya/

У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
github.com/SerDIDG
Аппаратное ускорение Оперы включено? У меня в примере автора с ним — стрелка моргает, без него — все нормально. Как видимо и у хрома выше.
Включено, но проблема не в том, всё достаточно просто можно профиксить.
#comment_4958943
В фф тоже скачет и везде должен скакать, так как вращается бокс, и в зависимости положения его углов увеличивается ширина\высота парента. Позиционирование спасёт мир.
В хроме не скачет, кстати, да.
Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.
С анимацией всё в порядке то, просто если сузить окно, горизонтальный скролбар начинает пульсировать. Связано с тем, что когда бокс вращается, и собственно его диагональ больше чем его сторона, увеличивается и родительский блок. В принципе это проведение есть правильным. А вот хром как-то странно себе ведёт с этим, да. Но я не знаю что из этого хуже, и во что серьёзное может выльется на более сложных задачах.
С Win смотрите? Я у себя проверил на всех браузерах — нигде скроллбар не изменялся.
Угу, вы сузьте окно пока не появится скроллбар.
Понял о чём речь, меняется только горизонтальный скроллбар, а я вертикальный проверял.
Делал подобную штуку — помог overflow.
Чето вы рано IE9 хороните-то — IE10 еще даже не вышел толком.
Разные браузеры по-разному отображают такие вещи. У FF хорошо заметны полоски на углах скруглённой части (не видите — прибавьте толщины линиям), у оперы как всегда косяки с позиционированием, но полосок на углах нет, в других браузерах скорее всего другие косяки (проверять лень), потому пока лучше всё же что-то другое 8(

А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают
«Опера 12» на «Маке» — скачет скролл, в последних ФФ, Сафари и Хроме на той же платформе — всё ок.
UFO just landed and posted this here
UFO just landed and posted this here
если дописать overflow:hidden; на body перестанет скакать
UFO just landed and posted this here
Тогда уж префиксы ставьте или Chrome 20.0.1132.47 m не включен в список «всех современных браузеров»?
UFO just landed and posted this here
Opera Next последняя — верхний левый угол
UFO just landed and posted this here
Да, работает. Спасибо за пример, всегда центрировал с помощью margin и position.
UFO just landed and posted this here
Увы, в опере не пашет. Да и похоже что вы старый стандарт используете, в рекомендации сейчас flex и inline-flex: w3c, mozilla
UFO just landed and posted this here
Мне кажется что лучше не использовать стандарт от которого отказался w3c, даже если он поддерживается в каких-либо браузерах. Пройдёт год-два и всё что было свёрстано на этих свойствах просто полетит.
Кстати, в примере из-за 100% высоты появился скролл.
UFO just landed and posted this here
UFO just landed and posted this here
Что вы плохого увидели в display: table?
UFO just landed and posted this here
Так объясните в чём? Использовать устаревшие свойства тоже неправильно.
UFO just landed and posted this here
Пока что это один из лучших вариантов на текущей спецификации и поддержке, если мы используем не абсолютно спозиционированный блок.
Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).
UFO just landed and posted this here
UFO just landed and posted this here
Да, но псевдо-элементы тоже нужны, как, к примеру, вот в этом варианте: #comment_4958553
UFO just landed and posted this here
Вот это хороший вариант, спасибо.
UFO just landed and posted this here
UFO just landed and posted this here
Only those users with full accounts are able to leave comments. Log in, please.