Verona PrimeNG scroll issue on Mobile

[robertvb]

Problem: Severe scrolling and layout instability on phone

Device used: iPhone 12 (both Safari and Chrome browsers)

Note: The issue only appears on physical mobile devices - browser mobile view simulation does not reproduce the problem

Steps to reproduce:

1. Use an actual phone and open PrimeNG Verona Template https://verona.primeng.org/
2. Scroll down on any page and try to get to the footer. At first it is hard to see it, you need to scroll multiple times.
3. Once you get to see the footer and you scroll up, you cannot see the bread crumb anymore, and when you manage to see it the scroll sometimes gets buggy.

I believe this issue is specific to the Verona template.

Video: https://drive.google.com/file/d/1JZfceP37VsKEIQ8qxXNEN53Dij3XrCbJ/view?usp=drive_link

[cagataycivici]

We have identified the issue and working on a fix.

[atkntepe]

iOS Safari Scrolling Issue - Temporary Workaround

While we work on a more permanent solution integrated into the template, you can implement this workaround immediately.

Part 1: CSS/SCSS Changes

These changes fix the core viewport calculations and scroll behavior for iOS devices. These alone will resolve most of the reported issues.

1.1 HTML Meta Tag

File: src/index.html

Update the viewport meta tag to include viewport-fit=cover:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />

---

1.2 Main Layout Styles

File: src/assets/layout/_main.scss

Step 1: Update the html rule:

html {
    height: 100%;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

Step 2: Update the body rule to lock body scroll:

body {
    font-weight: 400;
    padding: 0;
    margin: 0;
    height: 100%;              // Changed from min-height: 100%
    overflow: hidden;           // NEW - Critical for iOS fix
    background: var(--surface-ground);
    color: var(--text-color);
    font-family: Lato, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Step 3: Update the .layout-container rule to lock container:

.layout-container {
    background: var(--v-body-bg);
    width: 100%;                         // NEW
    position: fixed;                     // NEW - Critical for iOS fix
    top: 0;                              // NEW
    left: 0;                             // NEW
    bottom: 0;                           // NEW
    height: 100vh;                       // Changed from min-height
    height: -webkit-fill-available;      // NEW - iOS magic property
    overflow: hidden;                    // NEW
}

---

1.3 Content Wrapper & Scrollable Area

File: src/assets/layout/_content.scss

Replace the .layout-content-wrapper section with:

.layout-content-wrapper {
    transition: margin-left var(--layout-section-transition-duration);
    padding-top: 5rem;
    height: 100%;              // NEW
    position: relative;        // NEW

    .layout-content {
        border-top: 1px solid var(--surface-border);
        overflow: scroll;                      // Changed from 'auto' - Critical!
        height: 100%;                          // Changed from calc(100vh - 5rem)
        padding: 2rem;
        background-color: var(--surface-ground);
        border-top-left-radius: 30px;
        box-shadow: inset 0px 3px 4px rgb(0 0 0 / 10%);
        -webkit-overflow-scrolling: touch;     // NEW - iOS smooth scrolling

        .layout-content-inner {
            display: flex;
            flex-direction: column;
            min-height: calc(100% + 3px);      // Changed from height: 100%
        }
    }
}

---

1.4 Mobile Responsive Styles

File: src/assets/layout/_responsive.scss

Find the @media screen and (max-width: 991px) section and make these updates:

Step 1: Update .layout-topbar .topbar-menubutton to use safe areas:

.topbar-menubutton {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0);  // NEW - iOS safe area
    right: 0;
    right: env(safe-area-inset-right, 0);    // NEW - iOS safe area
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    color: var(--primary-color-text);
    outline: 0 none;
    border-top-left-radius: 30px;
    background: var(--primary-color);
    transition: background-color var(--layout-section-transition-duration);
    z-index: 1001;                           // NEW - Above topbar

    &:hover {
        background-color: var(--p-primary-400);
    }
}

Step 2: Update .layout-content-wrapper mobile styles:

.layout-content-wrapper {
    margin-left: 0;
    padding-top: 9rem;
    height: 100%;              // Changed from calc(100% - 9rem)

    .layout-content {
        border-top-right-radius: 30px;
        height: 100%;          // Changed from calc(100vh - 9rem)
    }
}

---

If you're satisfied with the results, you can stop here.

---

Part 2: JavaScript Enhancement

This provides additional polish by preventing the iOS rubber-band bounce effect from occasionally causing layout issues at scroll edges.

File: src/app/layout/components/app.layout.ts

Step 1: Add OnInit to the imports:

import { Component, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';

Step 2: Update the class declaration to implement OnInit:

export class AppLayout implements OnInit, OnDestroy {

Step 3: Add the following method inside your AppLayout class (after the @ViewChild declarations):

ngOnInit() {
    // Fix iOS Safari scroll chaining issue
    this.preventScrollChaining();
}

preventScrollChaining() {
    // Wait for view to initialize
    setTimeout(() => {
        const scrollContainer = document.querySelector('.layout-content') as HTMLElement;
        if (!scrollContainer) return;

        // Set initial scroll position away from edge to prevent bounce
        scrollContainer.scrollTop = 1;

        // Handle scroll to prevent reaching absolute edges
        scrollContainer.addEventListener('scroll', async () => {
            await new Promise(resolve => window.requestAnimationFrame(resolve));

            const { scrollTop, scrollLeft, scrollHeight, clientHeight } = scrollContainer;

            const atTop = scrollTop === 0;
            const beforeTop = 1;
            const atBottom = scrollTop === scrollHeight - clientHeight;
            const beforeBottom = scrollHeight - clientHeight - 1;

            if (atTop) {
                scrollContainer.scrollTo(scrollLeft, beforeTop);
            } else if (atBottom) {
                scrollContainer.scrollTo(scrollLeft, beforeBottom);
            }
        });
    }, 100);
}

---

Summary

This workaround provides an immediate solution. We're working on integrating a more permanent fix into the core template that will be available in the next release.

Part 1 (CSS/SCSS changes) resolves the core scrolling issues and is essential.

Part 2 (JavaScript enhancement) is optional and provides additional refinement for edge-case bounce behavior.

If you encounter any issues implementing this workaround, please let us know!

[robertvb]

Thank you so much @atkntepe

I have just tested out the workaround you provided. It works.

Is there any ETA for the next template release with the permanent fix?

Thanks in advance

[atkntepe]

Glad to hear it! we have updates lined up for templates, but i don't have an ETA for it yet.

[robertvb]

hey @atkntepe FYI - I have just tested the workaround on Chrome using an Iphone device and the issue is still persisting.

Is there any other PrimeNG template that you would recommend for both laptop and mobile usage? We really need a layout that works both mobile and regular screen

thanks