Просмотр исходного кода

fix(layout): reserve logo image box via intrinsic dimensions (#8774)

* fix(layout): reserve logo image box via intrinsic dimensions

Add the SVG's intrinsic 1280x256 dimensions to the default
<img class="logo"> in header.phtml and simple.phtml. The
browser uses these to allocate a correctly-proportioned box
from HTML parse time, before CSS is applied; without them, a
cached image can render at native size for a frame on fast
back-to-back navigation. CSS still controls the rendered
height (2rem wide, 24px narrow); width auto-derives from the
intrinsic ratio.

* fix(layout): use rendered logo size for img dimensions

1280 × 256 (the SVG's intrinsic size) replicates the unstyled-frame
flash this PR aims to prevent. 160 × 32 has the same 5:1 ratio and
matches the CSS-rendered size, so the reserved box is correct both
before and after CSS applies.

---------

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn 2 недель назад
Родитель
Сommit
2787014bde
2 измененных файлов с 2 добавлено и 2 удалено
  1. 1 1
      app/layout/header.phtml
  2. 1 1
      app/layout/simple.phtml

+ 1 - 1
app/layout/header.phtml

@@ -6,7 +6,7 @@
 	<div class="item title">
 		<a href="<?= Minz_Url::display(['c' => 'index', 'a' => 'index'], 'html', 'root') ?>">
 			<?php if (FreshRSS_Context::systemConf()->logo_html == '') { ?>
-				<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" loading="lazy" />
+				<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" width="160" height="32" loading="lazy" />
 			<?php
 				} else {
 					echo FreshRSS_Context::systemConf()->logo_html;

+ 1 - 1
app/layout/simple.phtml

@@ -49,7 +49,7 @@
 		<div class="item title">
 			<a href="<?= Minz_Url::display(['c' => 'index', 'a' => 'index'], 'html', 'root') ?>">
 				<?php if (FreshRSS_Context::systemConf()->logo_html == '') { ?>
-					<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" loading="lazy" />
+					<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" width="160" height="32" loading="lazy" />
 				<?php
 					} else {
 						echo FreshRSS_Context::systemConf()->logo_html;