Ошибка визуализации текста Javascript при обновлении (только веб-набор) - PullRequest
Новая
       8

Ошибка визуализации текста Javascript при обновлении (только веб-набор)

1 голос
/ 10 мая 2011

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

По какой-то причине текст обновляется, но не отображается правильно. Как будто эта часть 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, на которые есть ссылки и написанные на странице, и проблема все еще там. Я понятия не имею, что не так, но это не похоже на столкновение или конфликт.

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

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

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

Ответы [ 2 ]

1 голос
/ 10 мая 2011

Похоже, что мигание текста ( установка 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/

0 голосов
/ 28 ноября 2012

Проблема была со стилем в классе "playercontrols". 

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

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

...