Комментарии 99
Круто, но gif картинка не меньше будет занимать? :)
Gif вам такой прозрачности не даст + добавит один запрос.
PNG & data/uri в CSS, не?
1. 1 запрос который скешируется и на серверной стороне и на клиентской и больше не будет подгружаться, потому и на сервере он отдастся из памяти и на клиентской стороне тоже из памяти будет получатся
2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
3. «такая прозрачность» — имеются в виду размытые границы стрелки?
2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
3. «такая прозрачность» — имеются в виду размытые границы стрелки?
не работает в Google Chrome 20.0.1132.47 m Win7 (на минуточку, самый популярный браузер в мире ;)
временами мелькает стрелка, когда есть задержка с отрисовкой
в ФФ 12.0 работает
временами мелькает стрелка, когда есть задержка с отрисовкой
в ФФ 12.0 работает
У меня эта же версия стоит, Win7 x64, всё прекрасно работает.
у меня 32bit, запускал даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f
За слово sppiner, addblock+ может вырезать. Если бы оно просто не работало, были бы бордеры хотя бы.
«даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f»
адблока нет
и чуть выше — «временами мелькает стрелка, когда есть задержка с отрисовкой»
просто из-за постоянной перерисовки самой стрелки не видно.
адблока нет
и чуть выше — «временами мелькает стрелка, когда есть задержка с отрисовкой»
просто из-за постоянной перерисовки самой стрелки не видно.
Но вы понимаете, что проблема только у вас у одного персонально, а не у всего мира? Это ведь о чём-то говорит.
Не только у него. У меня ровно то же наблюдается (Chrome 20.0.1132.47 m, Win7×64). Плагинов нет, инкогнито-режим. Редко-редко моргает стрелочка, и всё.
А вы пробовали вручную запустить пример, без использования jsfiddle? Т.е. html-код скопировать в новый файл и запустить.
Это и фиддл умеет: fiddle.jshell.net/vyAw8/371/show/light/
У вас блок вообще не отображается?
Тоже самая сборка и виндоус, всё отображается. Попробовал на нетбуке — отображается только часть кружочка, и стрелка мелькает. Сначала стал дулмать на аппаратное ускорение, но оно оказалось отключено и там и там. Не уж то зависит от видеокарты?
Вполне может не работать из за видео карты, точно такое встречалось с поддержкой transform3d, может и просто с transform тоже есть подобные проблемы.
Причем даже modernizr пока не умеет определять поддержку на уровне железа.
Причем даже modernizr пока не умеет определять поддержку на уровне железа.
А знаете, похоже, Вы правы. Проверил на другой машине с нормальным видео — всё крутится. А у меня древняя интеловская графика G31…
Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(
Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(
Ага. На нетбуке в другом браузере были видны фризы, когда в хроме анииация была плавная хотя и не всё отображалось.
В хроме есть about:flags, попробуйте там включать/отключать параметры:
«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»
Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»
Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.
У вас сам блок вообще не отображается. Проблема явно на вашей стороне.
В Опере скролл скачет. Впрочем, там часто что-нибудь скачет. :)
Странно, у меня не скачет, последняя 12 версия.
вам пишут 2 человека, что метод не работает как заявлено («работает во всех современных браузерах» ), а вы талдычите, что у вас работает.
с таким подходом ваш метод никому не нужен.
с таким подходом ваш метод никому не нужен.
Прежде чем обвинять кого-то в криворукости, выровняйте свои руки ©
Вам человек багрепорт шлёт, а вы его минусуете…
Я никого не минусую из принципов. А баг есть только у этого человека, и не известно, что у человека ещё этого есть. )
Видите баг? А он есть.
Он есть не только у этого человека.
Но это не говорит о том, что автор виноват в чём-то. Раз на одинаковых системах, сборка хрома что-то работает по разному, значит стоит писать в баг терекер хрома, а не то, с каким фэ пишет IntenT.
НЛО прилетело и опубликовало эту надпись здесь
Opera Next последняя сборка, Ubuntu x64 — скачет однако! И объект вращения во время того, как скачет болтается влево-вправо.
Chromium хорошо работает.
В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
Так что не всё так хорошо, как было задумано.
Chromium хорошо работает.
В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
Так что не всё так хорошо, как было задумано.
Я чуть ниже ответил что есть такая проблема, всё зависит от конкретной реализации анимаций в браузере.
Странно, что в Opera на разных платформах (у вас же Win?) ведёт себя по разному, движок ведь один должен быть.
А так в топку такие эффекты, что они даже в одном браузере работают по разному.
Разработчикам, что ли скинуть ссылку на пример, пусть думают?
А так в топку такие эффекты, что они даже в одном браузере работают по разному.
Разработчикам, что ли скинуть ссылку на пример, пусть думают?
Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)
Открыл пример с jsfiddle — там Opera нормально работает (сглаживание самое приятное), а в FF всё-таки что-то с центрированием.
Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.
Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.
Размеры, цвета рамки.
Вот более стабильную версию сделал. Opera OK. FF — тоже центр тяжести на месте.
http://codepen.io/pen/8668/1
http://codepen.io/pen/8668/1
Самое верное решение )
Угу, css animation себя ведёт вообще стрёмно. Делал открытку давно, тоже хотел заюзать, потом решил что пусть лучше будет transition и откопал свою старую тестовую либу.
artlark.ru/demos/8march/
artlark.ru/demos/8march/
Интересный пример, что за либа?
Ну это я громко сказал. ) Просто набор кусков кода, всякие эксперименты, всё на коленке писал, фор фан так сказать. Потом появились идеи, и собрал во что-то рабочее.
Ещё вот такие делал:
artlark.ru/demos/bubbles/
artlark.ru/demos/maya/
У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
github.com/SerDIDG
Ещё вот такие делал:
artlark.ru/demos/bubbles/
artlark.ru/demos/maya/
У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
github.com/SerDIDG
Аппаратное ускорение Оперы включено? У меня в примере автора с ним — стрелка моргает, без него — все нормально. Как видимо и у хрома выше.
Включено, но проблема не в том, всё достаточно просто можно профиксить.
#comment_4958943
#comment_4958943
В фф тоже скачет и везде должен скакать, так как вращается бокс, и в зависимости положения его углов увеличивается ширина\высота парента. Позиционирование спасёт мир.
В хроме не скачет, кстати, да.
Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.
С анимацией всё в порядке то, просто если сузить окно, горизонтальный скролбар начинает пульсировать. Связано с тем, что когда бокс вращается, и собственно его диагональ больше чем его сторона, увеличивается и родительский блок. В принципе это проведение есть правильным. А вот хром как-то странно себе ведёт с этим, да. Но я не знаю что из этого хуже, и во что серьёзное может выльется на более сложных задачах.
Делал подобную штуку — помог overflow.
Чето вы рано IE9 хороните-то — IE10 еще даже не вышел толком.
Разные браузеры по-разному отображают такие вещи. У FF хорошо заметны полоски на углах скруглённой части (не видите — прибавьте толщины линиям), у оперы как всегда косяки с позиционированием, но полосок на углах нет, в других браузерах скорее всего другие косяки (проверять лень), потому пока лучше всё же что-то другое 8(
А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают
А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают
«Опера 12» на «Маке» — скачет скролл, в последних ФФ, Сафари и Хроме на той же платформе — всё ок.
НЛО прилетело и опубликовало эту надпись здесь
Тогда уж префиксы ставьте или Chrome 20.0.1132.47 m не включен в список «всех современных браузеров»?
Opera Next последняя — верхний левый угол
Если уж совсем надо отцентировать то есть вот такой вариант: jsfiddle.net/CyberAP/FkjXg/595/
НЛО прилетело и опубликовало эту надпись здесь
Что вы плохого увидели в display: table?
НЛО прилетело и опубликовало эту надпись здесь
Так объясните в чём? Использовать устаревшие свойства тоже неправильно.
НЛО прилетело и опубликовало эту надпись здесь
Пока что это один из лучших вариантов на текущей спецификации и поддержке, если мы используем не абсолютно спозиционированный блок.
Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).
Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).
НЛО прилетело и опубликовало эту надпись здесь
css-tricks.com/centering-in-the-unknown/ — 2 способ, чтобы пиксель в пискель вошло надо убирать пробел между inline-block'ами.
НЛО прилетело и опубликовало эту надпись здесь
Да, но псевдо-элементы тоже нужны, как, к примеру, вот в этом варианте: #comment_4958553
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Анимированная иконка загрузки на CSS3