Jump to content
  • 0

css3pie (PIE.htc) работает с задержкой при условии hover?


Squidward
 Share

Question

Скругляю уголки у li в IE при помощи css3pie (http://css3pie.com). У li при selected и hover также есть бекграунд из градиентного рисунка (repeat-x). При наведении мыши на li css3pie работает с задержкой, то есть скругление происходит не сразу, а спустя заметные для глаза доли секунды, а сначала виден нескругленный угол. Так и должно быть? Может, css3pie нельзя применять для hover?

И еще - без position:relative вообще не работает.

Пробовал по-разному: задавал position и css3pie как для всего (то есть неактивного) li сразу, так и для отдельно selected и hover, не помогло.

Link to comment
Share on other sites

Recommended Posts

  • 0

Скругляю уголки у li в IE при помощи css3pie (http://css3pie.com). У li при selected и hover также есть бекграунд из градиентного рисунка (repeat-x). При наведении мыши на li css3pie работает с задержкой, то есть скругление происходит не сразу, а спустя заметные для глаза доли секунды, а сначала виден нескругленный угол. Так и должно быть? Может, css3pie нельзя применять для hover?

И еще - без position:relative вообще не работает.

Пробовал по-разному: задавал position и css3pie как для всего (то есть неактивного) li сразу, так и для отдельно selected и hover, не помогло.

День добрый. Я постоянно использую css3pie в своих проектах, т.к. максимально использую html5 и css3, так что опыт есть.

И так, если вы скругляете углы у li вообще в принципе, то при ховере мелькания не должны быть, т.к. они (углы) скругляются сразу после загрузки страницы и отработки рендеринга pie броузером. Если же вы скругляете углы именно на событии ховер, то вполне естественно, что присутствует задержка. Вообще говоря стоит избегать ситуаций, динамического рендеринга с применением pie (это касается всяких эффектов по ховер и т.п.), т.к. тугодумность ie не позволяет достаточно быстро отрабатывать сложные вычисления происходящие внутри pie.

Да бывают моменты когда pie не корректно работает и в таких случаях спасает явное указание position:relative; в подавляющем большинстве случаев такой маневр не влечет за собой негативных последствий. Если есть необходимость использовать pie для position:absolute;, то тогда может понадобиться сделать дополнительный вложенный блок к которому и нужно будет применить pie, а родительский absolute установить куда требуется.

Для li еще часто требуется в стиле для ie<8 указывать display:inline; zoom:1; для включения hasLayout

Фоновый рисунок будет в любом броузере появляться с задержкой при наведении если он не привязан в спрайт с какой-то другой графикой которая явно загружается.

Удачи и успехов! Рад если был полезен.

Link to comment
Share on other sites

  • 0

pie ужасно тормозит сайт. Неужели старые браузеры стоят того, чтоб сайтом было неприятно пользоваться?

Вопрос немного не корректен.

Должно звучать примерно так:

Неужели дизайн настолько важен, что из-за него нужно лишать юзера доступности содержимого?

http://forum.htmlbook.ru/index.php?showtopic=29002

Обязательно посмотрите видео.

Link to comment
Share on other sites

  • 0

Я уже не раз говорил и не устану повторять, что pie - это полный калич, из-за которого сайт потерпит одни убытки, нежели получит какие-то плюсы. На форуме уже ни раз обсуждались минусы этого скрипта. Поверьте, они очень весомые, чтобы пользоваться этой вещью.

Link to comment
Share on other sites

  • 0

Работаю с pie, все устраивает.

Значит проекты у тебя несерьёзные, раз ни разу не замечал косяков.

Косяков незамечал, мб потому что использовал немного свойств CSS3.

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

border-radius

text-shadow

box-shadow

gradient

Link to comment
Share on other sites

  • 0

Работаю с pie, все устраивает.

Значит проекты у тебя несерьёзные, раз ни разу не замечал косяков.

Косяков незамечал, мб потому что использовал немного свойств CSS3.

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

border-radius

text-shadow

box-shadow

gradient

Всё равно, должны были быть. Значит тебе просто везло.

Link to comment
Share on other sites

  • 0

Работаю с pie, все устраивает.

Значит проекты у тебя несерьёзные, раз ни разу не замечал косяков.

Косяков незамечал, мб потому что использовал немного свойств CSS3.

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

border-radius

text-shadow

box-shadow

gradient

Вообще то border-radius, gradient как раз таки в css3pie реализованы с косяками. При чем они для разных браузеров свои. К тому же сама библиотека весит прилично.

Edited by Radiocity
Link to comment
Share on other sites

  • 0

Работаю с pie, все устраивает.

Значит проекты у тебя несерьёзные, раз ни разу не замечал косяков.

Косяков незамечал, мб потому что использовал немного свойств CSS3.

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

border-radius

text-shadow

box-shadow

gradient

Вообще то border-radius, gradient как раз таки в css3pie реализованы с косяками. При чем они для разных браузеров свои. К тому же сама библиотека весит прилично.

Почти обиделся, ну да ладно) Как реализовать свойства CSS3 для браузеров которые эти свойства не поддерживают?

Link to comment
Share on other sites

  • 0

Почти обиделся, ну да ладно) Как реализовать свойства CSS3 для браузеров которые эти свойства не поддерживают?

Никак. Через JS, например, или забить на закругленные углы и прочую мишуру.

Link to comment
Share on other sites

  • 0

alexriz, спасибо за обстоятельный ответ.

pie ужасно тормозит сайт

Что-то не заметил... А для не-IE браузеров он вообще не подключается.

Я уже не раз говорил и не устану повторять, что pie - это полный калич... На форуме уже ни раз обсуждались минусы этого скрипта.

Полазил по форуму, что-то там ничего конкретного не было, кроме того, что вы его каличем обзываете. Мне, например, проще вылечить пропадающие бордеры и бекграунды (на что сетуют пользователи pie и чего я пока вообще не увидел) добавлением всяких position и проч., чем рисовать скругленные уголки для кучи элементов и вешать их. В крайнем случае, уж если pie сильно закапризничает (как в моем случае с li), нарисую пару уголков. Но это мое мнение, никому его не навязываю.

это полный калич, из-за которого сайт потерпит одни убытки

Моя задача - сделать сайт (причем не один) и продать его. Что там с ним потом станет, мне уже не важно.

psywalker, вы не из Московской или Тамбовской областей? Просто слово "калич" там в обиходе :rolleyes:

Link to comment
Share on other sites

  • 0

На самом деле на простых макетах, где не нужна аннимация, нет сложных элементов, при умеренном использовании PIE не так уж и плох

Моя задача - сделать сайт (причем не один) и продать его. Что там с ним потом станет, мне уже не важно.

А вот это, кстати, не очень хорошая позиция. Свою работу надо делать максимально качественно в любом случае.

Link to comment
Share on other sites

  • 0

Моя задача - сделать сайт (причем не один) и продать его. Что там с ним потом станет, мне уже не важно.

А вот это, кстати, не очень хорошая позиция. Свою работу надо делать максимально качественно в любом случае.

А кто сказал, что я сайты на "тяп-ляп" собираюсь делать? Я имел в виду, что все, что произойдет с сайтом после меня - это уже зависит от клиента, купившего сайт.

Link to comment
Share on other sites

  • 0

Моя задача - сделать сайт (причем не один) и продать его. Что там с ним потом станет, мне уже не важно.

А вот это, кстати, не очень хорошая позиция. Свою работу надо делать максимально качественно в любом случае.

А кто сказал, что я сайты на "тяп-ляп" собираюсь делать? Я имел в виду, что все, что произойдет с сайтом после меня - это уже зависит от клиента, купившего сайт.

Этот сайт Вы добавите в свое портфолио, дадите на него ссылку, а там все пошло-поехало) Зато я отдал клиенту, а там пусть, что будет)

Link to comment
Share on other sites

  • 0

psywalker, вы не из Московской или Тамбовской областей? Просто слово "калич" там в обиходе :rolleyes:

Да, вот, кстати нет. Как ни странно, но я взял это выражение с форума, она почему-то тут часто употребляется и сразу даёт понять суть))) :D

На самом деле на простых макетах, где не нужна аннимация, нет сложных элементов, при умеренном использовании PIE не так уж и плох

Моя задача - сделать сайт (причем не один) и продать его. Что там с ним потом станет, мне уже не важно.

А вот это, кстати, не очень хорошая позиция. Свою работу надо делать максимально качественно в любом случае.

+1

Link to comment
Share on other sites

  • 0

Если грамотно использовать, то pie отлично спасает жизнь, и ие не тормозит. Уже протестировано вдоль и поперек, вполне достойный вариант. Да и не забывайте, что pie находиться на продолжительном beta-тесте, так что можно быть морально готовому к проблемам.

p.s. А, что такого в слове "калич"? У нас (Украина), часто употребляется, особенно года 4 назад, это вообще было слово-паразит)

Link to comment
Share on other sites

  • 0

И так, если вы скругляете углы у li вообще в принципе, то при ховере мелькания не должны быть

Ни фига... Скругление задано для li (или для a) изначально, а бекграунд только при hover, и все равно скругление с задержкой происходит.

Link to comment
Share on other sites

  • 0

И так, если вы скругляете углы у li вообще в принципе, то при ховере мелькания не должны быть

Ни фига... Скругление задано для li (или для a) изначально, а бекграунд только при hover, и все равно скругление с задержкой происходит.

Вот сейчас специально проверил, задал для li круглые углы и градиент, при hover задал другой градиент. Никаких проблем с углами не возникает, при наведении.

Может я Вас не правильно понял?

Link to comment
Share on other sites

  • 0

Не забывайте что многое зависит от самой странички.

Если набросать пример с парой блоков и им скруглить углы, то оно еще и нормально отработает. А если страничка загруженна тенями скруглениями и градиентами, то тут будут траблы.

У меня комп не новый, Pentium 4, оперативки 3Г.

Был случай когда локальная страничка в ие6 отрисовывалась не менее 20секунд из-за этого PIE. Там не было квадратного элемента. Все в скруглениях да тенях с градиентами.

Link to comment
Share on other sites

  • 0

Вот сейчас специально проверил, задал для li круглые углы и градиент, при hover задал другой градиент. Никаких проблем с углами не возникает, при наведении.

А вы попробуйте не делать градиент для li, а только для ховер. Может так проявится?

Link to comment
Share on other sites

  • 0

Вот сейчас специально проверил, задал для li круглые углы и градиент, при hover задал другой градиент. Никаких проблем с углами не возникает, при наведении.

А вы попробуйте не делать градиент для li, а только для ховер. Может так проявится?

Попробовал, тоже проблем никаких. mishka, прав в общем-то, все зависит от конкретного случая и конфигурации системы. Бывает, что pie ведет себя не предсказуемо. По этому может быть все, что угодно. Но делать изменение градиента, через pie не советую, так как скругленные углы никуда не денутся (раньше таких случаев не было), а вот рендер нового градиента будет проходить с ощутимой задержкой, особенно при большом DOM.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy