Unable to scroll sticky Footer on mobile view (Footer reveal effect) - overflow-y not working on iphone-14/pixel-7/iphone-12/Galaxy s20 ultra

Question

I've made a footer reveal effect using css, using following two classes:

Content class applies to wrapping div above the footer.

  .content {
    min-height: 100vh;
    background-color: white; /* Needed to obscure the footer behind it */
    position: relative; /* Needed to make z-index work */
    z-index: 1; /* Make sure the content is on top of the footer */
    padding-bottom: 60px; /* Adjust according to your footer height */
  }

Footer Class applies to the wrapping div of footer content

  .footer {
    background-color: black;
    position: sticky;
    bottom: 0;
    left: 0;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

This is working perfectly as far as the footer reveal effect is concerned. However since I have more content on footer than the view height of the mobile phone, Some of the content in footer gets hidden, for which I want to allow the scrolling on sticky footer. I searched through internet and found solution of adding overflow-y-auto, and defining a max height of the footer div.
I applied and test on chrome developer options. This strategy is working on Iphone SE and Samsung S8+ devices, however google pixel 7, iphone 14, iphone 12 and iphone XR donot seem to work well with it. I'm hoping that someone can guide me what Should I do to enable the scrolling on other mobile devices too.