Почему IE / Chrome изначально дают неверный clientHeight и scrollHeight для текстовой области? - PullRequest
Новая
       4

Почему IE / Chrome изначально дают неверный clientHeight и scrollHeight для текстовой области?

2 голосов
/ 30 июля 2010

Chrome (и IE при просмотре локальных файлов) дает начальное значение clientHeight элемента textarea, которое является неправильным.Как я могу получить IE и Chrome для получения правильных значений? ( Здесь продемонстрирована проблема )

Я устанавливаю позицию и размер текстовой области с помощью фиксированного / абсолютного CSSпозиционирование.Затем я проверяю значение clientHeight через JavaScript / jQuery.

Проблема не возникает постоянно, но постоянно воспроизводима.В частности, необходимы следующие условия:

  1. Использование Chrome (5.0).(Также IE (8.0), если файл открывается с локального компьютера.)
  2. Окно браузера развернуто.
  3. jQuery включен inline (по сравнению со ссылками как внешний файл)
  4. Страница не была загружена с момента запуска браузера.
  5. Мое приложение еще не обработало никаких команд.
  6. Переменная paddingLines определяется динамически на основе clientHeight.(Установка на 50 каждый раз является обходным решением.)

Мне нужны точные значения clientHeight и scrollHeight, потому что я использую эти свойства, чтобы определить, где нужно «привязать» текстовую область scrollHeight к началу последнего выводав первой строке текстовой области.На самом деле, если бы свойства были постоянно неточными между вызовами, он все равно работал бы.К сожалению, неточные свойства корректируются до правильных значений ко времени обработки первой команды.

Я попытался выделить проблему в демонстрационной версии здесь .Когда я попытался сделать еще более простой пример, проблема не воспроизводилась так последовательно.Я думаю, что есть некоторые проблемы с синхронизацией и / или оптимизацией браузера, потому что следующие обходные пути устраняют эту проблему:

  1. Установка переменной paddingLines каждый раз на 50 (вместо динамического вычисления ее на основе clientHeight)
  2. Включение jQuery в качестве внешнего файла (вместо встроенного)
  3. Добавление короткой задержки (всего 2 миллисекунды) до инициализации текстовой области.
  4. Загрузка приложенияв IE с сервера (по сравнению с открытием с локального компьютера)

Однако эти обходные пути - только клуджи, и я предпочел бы найти истинную причину / решение проблемы.Хотя это небольшая эстетическая проблема, я хочу глубже понять, как работают HTML, DOM, CSS, Javascript и jQuery в разных браузерах.Что-то не так с моим кодом?

Примечания:

  • Кажется, что причины неточных свойств Chrome отличаются от IE
  • Неточная клиентская версия Chrome. Высота, похоже, основанав максимизированном размере браузера.
  • Неточная клиентская IE в IEHeight может зависеть от предупреждения в информационной строке о небезопасных сценариях.

Ответы [ 3 ]

4 голосов
/ 13 августа 2015

У меня была такая же проблема.Я получил неправильный clientHeight с адаптивным дизайном.Попробуйте получить clientHeight на $(window).load(); вместо $(document).ready();

У меня это сработало!

2 голосов
/ 20 августа 2010

Я никогда не выяснял причину, но нашел приемлемый обходной путь, который не зависит от приостановки магического числа миллисекунд:

Обработка события resize.Это событие вызывается, когда браузер открывается в первый раз, даже если пользователь не изменил размер окна вручную.К этому моменту значения clientHeight и scrollHeight установлены во всех браузерах. 

$(window).resize(function(e) {
    // Called when the browser is first opened.
    // Values of clientHeight and scrollHeight have settled by this point.
});
0 голосов
/ 30 июля 2010
...