Проблемы с замиранием в Internet Explorer 7 при использовании jQuery - PullRequest
Новая
       27

Проблемы с замиранием в Internet Explorer 7 при использовании jQuery

2 голосов
/ 17 марта 2009

Я использую jQuery на сайте, на котором я работаю, и все работает нормально - за исключением Internet Explorer 7 (и предыдущих версий, но сайт не поддерживает их). Посмотрите на http://dev.staffanestberg.com/fromsweden/ в Safari или Firefox, затем в IE7, и вы поймете, что я имею в виду. В настоящее время я использую встроенный эффект FadeTo для затухания содержимого, но я также пытался создавать собственные эффекты, а также использовать Show / Hide, Animate и FadeUp / FadeDown. Я также использую SWFaddress на этом сайте, что может вызвать ошибки в сочетании с IE7, но разве это не будет отображаться и в других браузерах? Чего мне не хватает?

-Staffan

Ответы [ 5 ]

7 голосов
/ 28 января 2010

Проблема шрифта Cleartype с постепенным исчезновением jQuery

Это действительно хорошее объяснение точной проблемы. Это связано со шрифтом clear type в IE. Это исправление я использовал.

Пример: 

// This causes this text glich
$("#message").fadeIn();

// This will fix it
document.getElementById("#message").style.removeAttribute("filter");

Исправлено удаление фильтра. 

$('#message').fadeIn(function(){
    this.style.removeAttribute("filter");
});

Источник

3 голосов
/ 17 марта 2009

Я успешно заставил show / hide, fadeTo, fadeUp и fadeDown работать в IE6 и выше. Я обнаружил, что многие проблемы, возникающие у меня с анимацией, связанной с раскрытием элемента, связаны с тем, что данный элемент не был скрыт во время загрузки.

Попробуйте установить элемент (table или div), который постепенно превращается в style = "display: none", либо в html, либо программно.

2 голосов
/ 11 февраля 2011 
jQuery.fn.fixClearType = function(){
    return this.each(function(){
        if(typeof this.style.filter  && this.style.removeAttribute)
        this.style.removeAttribute("filter");
    })
}
1 голос
/ 22 марта 2011

Я обнаружил, что лучше всего просто применять фон ... Думайте об этом как о GIF. Так что нет jQuery. Чистый CSS

1 голос
/ 28 января 2010

Может быть, это хорошее решение для вас (для меня это). Решение простое, но эффективное (и очень приятное). IE имеет проблемы с альфа-прозрачностью, когда фон его родителя не имеет цвета (полная прозрачность).

Что мы делаем здесь (см. Пример ниже), так это сначала добавляем div, который почти прозрачен (прозрачен для глаз). Поскольку это первый div внутри холста / контейнера (например, => div), и он помещен в абсолют, все содержимое после этого div будет помещено поверх первого div, поэтому это становится фоном всего другого содержимого внутри этого холста.

Поскольку теперь есть фон, IE не показывает неприятных черных пятен (пикселей) или черных областей при исчезновении или уменьшении (при изменении непрозрачности) или при установке непрозрачности холста на значение ниже 100.

Как - пример с изображением 100x100: 

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

Чтобы увеличить или уменьшить изображение с помощью jQuery: 

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

Это также возможно: 

$("myImage").fadeIn("slow");

Вот и все!

Приятно, что это решение также работает с VML / SVG (Raphael) или другим контентом с альфа-прозрачностью. Также вам не нужно менять / взламывать код JS, потому что этот «взлом» не влияет на другие браузеры.

Надеюсь, это поможет.

...