Почему YUI StyleSheet неправильно переключает это изображение в IE <= 7 - PullRequest
Новая
       13

Почему YUI StyleSheet неправильно переключает это изображение в IE <= 7

0 голосов
/ 29 апреля 2011

В чем проблема?

Когда вы переключаете изображение путем установки или сброса «display: none» - в первый раз оно становится невидимым, но оставляет место выделенным - во второй разне становится видимым

Как воспроизвести проблему?

При использовании IE 7 (или менее) или IE 8 в режиме совместимости откройте HTML-код в GIST:- Нажмите кнопку переключения, изображение исчезнет, ​​но свиток все еще думает, что изображение там есть - Нажмите кнопку переключения еще раз, изображение не появляется

Что я пытаюсь сделать?

Я работаю над проектом, который отображает большое количество пользовательских данных, а рядом с пользовательскими данными мы отображаем значки - содержимое страницы отображается динамически на основе вызовов AJAX.И есть некоторый код (который вызывается, когда вы отмечаете / снимаете галочку с некоторых параметров отображения), которые делают эти значки невидимыми / видимыми.Пользователи отображаются в большой сетке - поэтому таблицы были необходимы.В качестве повышения производительности я начал использовать таблицы стилей YUI для исчезновения / повторного появления большого количества значков одного типа.

Что я хочу знать?

Что является основной причиной этой проблемы с отображением в IE?

Что я НЕ хочу знать?

Я не хочу знать, как изменитьструктура DOM, чтобы исправить эту проблему.Я уже знаю, что удаление фиктивной таблицы вокруг DIV устраняет проблему.Также, если вы поместите html непосредственно в элемент content_pane, не генерируя его динамически, проблема тоже исчезнет.Да, и FF / Chrome тоже работают нормально (мне даже нужно было об этом упомянуть?)

Выпуск демонстрации 

<html>
<head>
    <title>Stylesheet Testing</title>
    <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
    <script type="text/javascript">
    YUI().use("event", "stylesheet", function(Y){
        var stylesheet = new Y.StyleSheet();

        var toggletSet = true;
        Y.on("click", function() {
            if (toggletSet) {
                stylesheet.set('.myclass', {display: 'none'});
            } else {
                stylesheet.unset('.myclass', 'display');
            }
            toggletSet = !toggletSet;
        }, "#toggle");
        var html = [
                    '<table><tr><td>',
                    '<div style="overflow: auto; width: 100px; height: 60px;">',
                    '<img class="myclass" src="http://l.yimg.com/a/i/brand/purplelogo/uh/us/ydn.gif">',
                    '</div>',
                    '</td></tr></table>'
                    ];

        Y.one('#content_panel').setContent(html.join(''));
        Y.one('#toggle').set('disabled', false);
    });
    </script>
</head>
<body>
    <div id="content_panel"></div>
    <button id="toggle" disabled="disabled">toggle</button>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 22 сентября 2011

У меня была точно такая же проблема в моем проекте.Это дефект браузера и не имеет никакого отношения к YUI.

Нам пришлось отображать большое количество значков на странице, и очень медленно находить и устанавливать style.display для каждого элемента значков, поэтому мы решилииспользовать таблицу стилей YUI.
Хорошо, что она работает для IE при первой загрузке страницы, поэтому она все еще дает вам прирост производительности.Если какое-либо свойство отображения изменяется после загрузки страницы, вам придется прибегнуть к медленному подходу: найти все элементы значков и установить style.display один за другим.

Во всяком случае, это то, что я придумал, и это работает для представления совместимости IE7 и IE8: 

_displayChange : function(className, enabled) {
    this._styleSheet.set('.' + className, 'display:' + (enabled ? '' : 'none'));
    if (Util.browserInfo.ie) {
        // find DOM elements with the className if haven't done so
        ...
        Util.each(this._domElementsLookup[className], function(el) {
            el.style.display = 'none'; //need this for the IE quirk 
            el.style.display = enabled ? '' : 'none';
        });
    }
},

Обратите внимание, выше, я должен был установить style.display дважды, иначе он не будетработать при первом переключении дисплея.

0 голосов
/ 29 апреля 2011

Я подозреваю, что это ошибка браузера, но вы можете отправить заявку в YUI, и мы разберемся с ней.http://yuilibrary.com/projects/yui3/newticket

...