Chrome показывает пустую страницу на сайте языка RTL до тех пор, пока не изменится размер окна

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

Арабский язык RTL, поэтому тег <html> имеет dir="rtl" lang="ar". Это единственное различие между ним и английским сайтом.

Это сайт. Возможно, вам придется щелкнуть по логотипу несколько раз, чтобы увидеть, что он отображается пустым.

Ответы

Ответ 1

Я тоже заметил эту проблему, и я обыскал интернет на английском и арабском языках, но не смог найти причину проблемы. Я нашел обходное решение, чтобы исправить это; используйте следующие jQuery script в ваших веб-страницах, ориентированных на rtl:

//Chrome RTL UI Issue Fix
$(document).ready(function(){
    $(window).load(function() {
        $( "body" ).animate({
            scrollTop: 1
        });
    });
});

Все, что он делает, - это прокрутка страницы только 1px сразу после того, как все элементы страницы были загружены. Вы можете добавить код, который прокручивает его назад, если вы хотите.

Ответ 2

Я исправил эту проблему, и я хочу поделиться ею с вами. Я думаю, эта проблема только для gc на mac os. Как это исправить? спрячьте свое тело в своем css, а затем покажите его, когда загрузится страница, и все будет работать.

/*Add this to your css to hide body */
body {
    display: none;
}

<!-- Add to your html to js file to show your body again -->
  $(window).load(function() {
  // When the page has loaded
  $("body").show()
});

Ответ 3

Ссылка на страницу не работает. Доступна ли эта страница на сайте футуризма?

Я загрузил страницу futurism.com и добавил dir="rtl" lang="ar" в тег html. Я перезагрузил страницу 50 раз. Я не могу воспроизвести проблему.

Моя копия страницы работает на Apache с Multiviews.

  • Я добавил языковую директиву для арабского языка.
  • У меня есть две копии файла, futurism.htm.en и futurism.htm.ar
  • Я установил язык в своем браузере на арабский [ar].
  • Арабские страницы обсуждаются Apache.

Загрузка страницы без проблем.

Я также создал другую страницу с арабскими буквами Unicode. Он загружает и отображает арабский справа налево без проблем.

Ответ 4

У меня была та же проблема.

Просто не применяйте направление к тегам body или html.

<html>
    <head>
        <style>
            .rtl {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <div class="rtl">
            <!-- Your Codes Here ... -->
        </div>
    </body>
</html>

Ответ 5

Wordpress стал действительно раздражать при работе с RTL, вам нужно изменить размер или прокрутить, чтобы показать контент. Я думаю, что это происходит только на MacOS.

Я заметил, что некоторые сайты не имеют этой проблемы, поэтому, сравнивая html, я заметил, что на рабочих веб-сайтах есть много классов в <html>, например: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...  который добавлен modernizr.js(v2.8.3)

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

<script src="/js/modernizr.js"></script>

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

Ответ 6

У меня была схожая проблема с вашей, но мой сайт показал, что до тех пор, пока он не будет обновлен вручную на телефонах Android, после чего страница будет пуста. Это поведение можно также воспроизвести в инструментах разработчика в Chrome и Opera (оба используют механизм Blink).

Во-первых, я применил фиксированное правило позиционирования к телу,

body { position: fixed; }

Затем я вернул позиционирование при загрузке страницы с помощью jQuery,

jQuery(window).load(function() { jQuery('body').css('position','static'); });

Ответ 7

У меня есть эта проблема с моим Wordpress, и я исправил ее, добавив этот код javascript

window.scrollTo(0, 1);
window.scrollTo(0, 0);