У меня есть веб-приложение на основе Laravel, и у меня есть очень странная и специфическая проблема, возникающая только на некоторых страницах в Firefox.
Если у меня есть форма на странице, и в этой форме есть поле с автофокусом, HTML-код загружается перед CSS, и на секунду или две пользователь видит страницу как обычный текст, прежде чем CSS-файл загружается. и тогда все возвращается в норму.
Корреляция кажется надуманной, но удаление автофокуса из поля формы решает проблему в 100% случаев на веб-сайте. Требует ли автофокус, как браузер должен загружать HTML перед стилем? Как это исправить, не удаляя автофокус со всех моих форм?
Это пример поля формы с сайта:
<div class="form-group">
<label for="card-number" class="col-md-4 control-label">Card Number</label>
<div class="col-md-6">
<input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16">
@if ($errors->has('card-number'))
<span class="help-block">
<strong>{{ $errors->first('card-number') }}</strong>
</span>
@endif
</div>
</div>
Все CSS-файлы загружаются в <head> страницы:
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">