Close Menu
  • Home
  • AI
  • Big Data
  • Cloud Computing
  • iOS Development
  • IoT
  • IT/ Cybersecurity
  • Tech
    • Nanotechnology
    • Green Technology
    • Apple
    • Software Development
    • Software Engineering

Subscribe to Updates

Get the latest technology news from Bigteetechhub about IT, Cybersecurity and Big Data.

    What's Hot

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Part 1 – Energy as the Ultimate Bottleneck

    October 13, 2025
    Facebook X (Twitter) Instagram
    Facebook X (Twitter) Instagram
    Big Tee Tech Hub
    • Home
    • AI
    • Big Data
    • Cloud Computing
    • iOS Development
    • IoT
    • IT/ Cybersecurity
    • Tech
      • Nanotechnology
      • Green Technology
      • Apple
      • Software Development
      • Software Engineering
    Big Tee Tech Hub
    Home»iOS Development»css – iOS 26 Safari – Web layouts are breaking due to fixed/sticky position elements getting shifted vertically
    iOS Development

    css – iOS 26 Safari – Web layouts are breaking due to fixed/sticky position elements getting shifted vertically

    big tee tech hubBy big tee tech hubSeptember 2, 2025002 Mins Read
    Share Facebook Twitter Pinterest Copy Link LinkedIn Tumblr Email Telegram WhatsApp
    Follow Us
    Google News Flipboard
    css – iOS 26 Safari – Web layouts are breaking due to fixed/sticky position elements getting shifted vertically
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link


    In Safari on iOS 26 beta, when the page is scrolled down and the address bar shrinks at the bottom, the viewport appears to get displaced vertically which in turn shifts the position of elements with position “fixed” or “sticky.”

    Code example:

    Note the relevant div serving as a fixed footer, with inline styles as follows:

    style={{
      position: "fixed",
      bottom: 0,
    }}
    

    Navigate to the code sandbox url on iPhone with iOS 26 beta to reproduce the issue:

    Scroll down the page. Notice that the fixed footer is no longer aligned to the bottom of the screen. Rather, there is a gap between the bottom of the viewport and the bottom of the fixed footer as shown in the screenshot. (The text is obstructed in the screenshot; it reads “This should be fixed at the bottom of the screen when I scroll down.”)

    Screenshot of issue

    Any suggestions for how to address this? So far I’ve tried the following:

    • Various combinations of different css attributes on the document and body elements (position , top , overflow , overscroll-behavior )

    • Adding bottom: -100vh; padding-bottom: calc(100vh + env(safe-area-inset-bottom, 0)) to the footer (this worked fine in other browsers, but not in Safari 26 beta)

    • Setting the following css:

      html {
        overflow: hidden;
      }
      
      body {
        overflow: auto;
      }
      
      • This prevented the issue (footer element shifting on scroll), but it had some undesired side effects. Scroll position no longer gets maintained when navigating back to the page, and programmatic scroll using window.scrollTo stops working. Also, the address bar no longer shrinks at the bottom of the screen when the user scrolls down.



    Source link

    Breaking CSS due elements fixedsticky iOS layouts Position Safari shifted vertically Web
    Follow on Google News Follow on Flipboard
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email Copy Link
    tonirufai
    big tee tech hub
    • Website

    Related Posts

    ios – Apple mapkit route function dose not works in China

    October 12, 2025

    swift – Does UIDevice.current.identifierForVendor change after iCloud backup and restore on another iOS device?

    October 11, 2025

    uitabbarcontroller – How to add custom UIView to floating UITabBarItem in iOS 26 Liquid Glass UITabBar

    October 10, 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Editors Picks

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Part 1 – Energy as the Ultimate Bottleneck

    October 13, 2025

    From Static Products to Dynamic Systems

    October 13, 2025
    Advertisement
    About Us
    About Us

    Welcome To big tee tech hub. Big tee tech hub is a Professional seo tools Platform. Here we will provide you only interesting content, which you will like very much. We’re dedicated to providing you the best of seo tools, with a focus on dependability and tools. We’re working to turn our passion for seo tools into a booming online website. We hope you enjoy our seo tools as much as we enjoy offering them to you.

    Don't Miss!

    How to run RAG projects for better data analytics results

    October 13, 2025

    MacBook Air deal: Save 10% Apple’s slim M4 notebook

    October 13, 2025

    Subscribe to Updates

    Get the latest technology news from Bigteetechhub about IT, Cybersecurity and Big Data.

      • About Us
      • Contact Us
      • Disclaimer
      • Privacy Policy
      • Terms and Conditions
      © 2025 bigteetechhub.All Right Reserved

      Type above and press Enter to search. Press Esc to cancel.