Ошибка рендеринга текста Javascript при обновлении (только webkit)

#javascript #css #dom #render

#javascript #css #dom #рендеринг

Вопрос:

Я пытаюсь переключать текст по щелчку. При нажатии кнопки «Пауза» измените текст на «Воспроизведение».

По какой-то причине текст обновляется, но отображается некорректно. Это как если бы эта часть DOM обновлялась, но не обновлялась. По какой-то причине это происходит только в браузерах webkit (Safari 5, Chrome 11). Firefox 4 рендерит его так, как должен.

Вот видео проблемы:http://www.youtube.com/watch?v=tIRKx25NmYo

Я использую Cmd A в видео, чтобы выбрать текст, который появляется, чтобы обновить текст и заставить его отображаться должным образом.

Вот код:

 <span class="playercontrols" id="playpause" onclick="toggle(this.id);" style="cursor:pointer;">Pause</span>


<script type="text/javascript">

function toggle(sender){

var t = document.getElementById(sender);
var txt = t.innerHTML;

switch(txt) 
    {
    case 'Pause':
        txt = 'Play';
        pause();
        break;
    case 'Play':
        txt = 'Pause';
        play();
        break;
    default:
        txt = 'Pause';
    }           
t.innerHTML = txt;

}

</script>

РЕДАКТИРОВАТЬ: я закомментировал все остальные фрагменты javascript, на которые ссылаются и которые написаны на странице, и проблема все еще существует. Я понятия не имею, что не так, но, похоже, это не столкновение или конфликт.

РЕШЕНА. (Не разрешается отмечать этот ответ, потому что он слишком свежий.)

Редактировать: Ответ теперь добавлен ниже.

Спасибо за все комментарии. Надеюсь, этот пост поможет другим в будущем с той же проблемой.

1. попробуйте разместить свой тег span в другом месте

2. что вы подразумеваете под другим местоположением? Я просто извлек его из div, в котором он был, и переместил в первую строку внутри тега body. никакого эффекта.

3. Что делать pause() и play() do?

4. Они воспроизводят и приостанавливают видео на YouTube. Ошибка рендеринга возникает даже без этих вызовов функций.

5. @Zaqx, flash наложен поверх текста ( прозрачно )? или наоборот ( текст, наложенный на flash )?

Ответ №1:

Кажется, что перепрошивка текста (установка visibility на hidden , а затем возврат к исходному значению) устраняет проблему..

Итак, вот обходной путь.

 t.innerHTML = txt;
/* add the following right after changing the text */
var visibility = t.style.visibility;
t.style.visibility = 'hidden';
setTimeout( function(){
    t.style.visibility = visibility;
}, 1);

демо http://jsfiddle.net/gaby/SgwsZ/4 /

1. Очень броский! хаха не смог удержаться. 😉 Серьезно, хотя это выглядит как довольно солидный обходной путь. Хотел бы я проголосовать за это, но, видимо, мне нужна репутация 15. :/ Спасибо, что уделили этому время!

Ответ №2:

Проблема заключалась в стилизации класса «playercontrols».

 .playercontrols {
    position: relative;
    top: 80px;
    left: 50px;
}

У меня было установлено значение position relative, что, по-видимому, привело к сбою рендеринга обновления webkit.