Quellcode durchsuchen

fix(themes): keep article nav bar pinned to bottom in iOS standalone PWAs (#8933)

* fix(themes): keep article nav bar pinned to bottom in iOS standalone PWAs

On iOS standalone PWAs, WebKit fails to repaint `position: fixed` elements
after a programmatic scroll, so the article navigation bar (#nav_entries)
drifts to the middle of the screen after tapping the prev/next buttons
(which scroll the article container in JS). This does not happen in regular
Safari, where the browser chrome provides repaint hooks the standalone shell
lacks.

Promote #nav_entries to its own compositor layer (transform: translateZ(0))
so WebKit keeps it pinned to the viewport across programmatic scrolls.

This supersedes #8833, whose `top: auto` was a no-op: nothing in the
stylesheet ever sets a `top` value on #nav_entries, so it could not affect
positioning.

Fixes #8829

* Add Antonio Santos to CREDITS.md

* fix(themes): drop redundant will-change on #nav_entries

The compositor layer that keeps #nav_entries pinned in iOS standalone PWAs
comes entirely from transform: translateZ(0). The accompanying
will-change: transform was redundant — it only hints at upcoming changes and
adds nothing to an element already promoted to its own layer.

Removing it leaves the bar pinned across programmatic scrolls (verified on an
iOS standalone PWA), with no behavioural change.

Based on maintainer feedback on #8933.
Antonio Santos vor 1 Woche
Ursprung
Commit
5c5b0b9e66
3 geänderte Dateien mit 9 neuen und 0 gelöschten Zeilen
  1. 1 0
      CREDITS.md
  2. 4 0
      p/themes/base-theme/frss.css
  3. 4 0
      p/themes/base-theme/frss.rtl.css

+ 1 - 0
CREDITS.md

@@ -31,6 +31,7 @@ People are sorted by name so please keep this order.
 * [Andy Valencia](https://github.com/vandys): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:vandys), [Web](https://www.vsta.org/andy/)
 * [Annika Backstrom](https://github.com/abackstrom): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:abackstrom), [Web](https://sixohthree.com/)
 * [Anton Smirnov](https://github.com/arokettu): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:arokettu), [Web](https://sandfox.me/)
+* [Antonio Santos](https://github.com/Otolock): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Otolock), [Web](https://antoniosantos.io/)
 * [ArthurHoaro](https://github.com/ArthurHoaro): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:ArthurHoaro)
 * [Artur Weigandt](https://github.com/Art4): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:Art4), [Web](https://ruhr.social/@Art4)
 * [ASMfreaK](https://github.com/ASMfreaK): [contributions](https://github.com/FreshRSS/FreshRSS/pulls?q=is:pr+author:ASMfreaK)

+ 4 - 0
p/themes/base-theme/frss.css

@@ -1927,6 +1927,10 @@ a.website:hover .favicon {
 	width: var(--width-aside);
 	padding-bottom: env(safe-area-inset-bottom);
 	z-index: 50;
+	/* Promote to its own compositor layer so iOS standalone PWAs keep the bar
+	   pinned to the viewport after a programmatic scroll (e.g. prev/next entry),
+	   working around a WebKit bug that otherwise lets it drift to mid-screen. */
+	transform: translateZ(0);
 }
 
 .aside:not(.visible) ~ #nav_entries {

+ 4 - 0
p/themes/base-theme/frss.rtl.css

@@ -1927,6 +1927,10 @@ a.website:hover .favicon {
 	width: var(--width-aside);
 	padding-bottom: env(safe-area-inset-bottom);
 	z-index: 50;
+	/* Promote to its own compositor layer so iOS standalone PWAs keep the bar
+	   pinned to the viewport after a programmatic scroll (e.g. prev/next entry),
+	   working around a WebKit bug that otherwise lets it drift to mid-screen. */
+	transform: translateZ(0);
 }
 
 .aside:not(.visible) ~ #nav_entries {