I have some full height (100vh) elements on my home page that work fine on all browsers except for when looking at the site through an instagram browser. The dynamic navigation tab that shows and hides itself on the instagram browser causes the height to change and results in a jittery scroll. I've tried to change it to lvh or svh values, also to fix the background position to keep the heights static but it doesnt seem to work on instagram. Does anyone have any experience or advice with this?
How can I prevent 100vh elements causing issues on the instagram browser?
52 views Asked by Jack Schofield At
1
There are 1 answers
Related Questions in CSS
- How to use custom font during html to pdf conversion?
- Storing the preferred font-size in localStorage
- mp4 embedded videos within github pages website not loading
- Is there any way to glow this bulb image like a real light bulb
- What can I do to improve my coding on both html and css
- Uncaught TypeError: google.maps.LatLng is not a constructor at init (script.js:7:13)
- Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
- How to increase quality of mathjax output?
- Hover animation resetting( seemingly reverting back to original CSS and then again to hover)when moving mouse horizontaly accross a part of an element
- Storing selected language in localStorage
- How to clip grid cell and provide scroll as well?
- KeyboardAvoidingView makes a messy the flexbox
- Rotate an object around another object in javascript
- Understanding Scroll Anchoring Behavoir
- how to use only block layout in this css code?
Related Questions in RESPONSIVE-DESIGN
- Javascript Place Image Where User Clicks
- How can i prevent the image from zooming in when i resize the browser?
- Como mudar o src de uma imagem por responsividade
- What CSS & HTML do I need to switch a table from 4 cols of data in 1 row to 2 cols in 2 rows at 550px screen width w/o duplicate content?
- How to make my relatively-positioned elements 'stick' to a specific yet responsive background design without breaking from the design?
- How to Place a "Copy to Clipboard" Icon Inside of an Input Text Box?
- I'm trying to make a responsive SVG, but it isn't showing on Safari
- react-slick library carousel breakpoints do not work on mobile
- I want to create a creative website based on my project. I am new in this field
- Why is my display element not responsive?
- Dynamic sizing and responsive design
- How do I Center Score Text for a Basketball Scoreboard?
- Bootstrap 5.3 burger menu not responsive in Underscore WordPress template
- Why does it shows good in the editor and something completely different in the emulator?
- CSS formatting with flexbox and other divs
Related Questions in INSTAGRAM
- Instagrapi recently showing HTTPError and UnknownError
- Scrolling Instagram Followers Not Working
- Retrieve shareable account links from LinkedIn and Instragram in React Native CLI
- Instagram DM doesn't show wordpress website's image
- 403 Permission Error When Tryna Upload Reel To Instagram Using Graph API, But Image works?
- Instagram API: Fetching user posts
- How do i force a link to open in the native browser of a mobile os?
- How to make OAuth authentication and use Instagram API properly these days?
- Android - Instagram basic display API authorization URLnot loading in Android 6 Marshmallow
- Python script to check if the Instagram user is private or public
- Available Catalogue endpoint returns empty data array instagram graph api
- ProxyError HTTPSConnectionPool(host='i.instagram.com', port=443)
- Not able to login using instabot
- Is it possible to watch for new posts with Instagram Webhooks?
- How to scrape liked videos on instagram?
Related Questions in INAPPBROWSER
- Make sure a Custom Tab / In-App browser is opened inside app
- Link target _system is not working on IOS inAppBrowser
- Cordova InAppBrowser, going back to the first tab causes it to be refreshed
- Cordova InAppBrowser performance issue on Android
- Styles not showing correctly in Facebook In-App Browser (IAB) in some devices
- Plaid Link popup browser leaves my capacitor app and the flow is interrupted
- I want to detect in-app browser of slack using javascript
- download PDF file from external website with inappbrowser ionic cordova
- From @awesome-cordova-plugins/in-app-browser not able to download PDF in Ionic Cordova Applications
- How can I prevent 100vh elements causing issues on the instagram browser?
- Need fullscreen Cordova Inappbrowser on iOS
- how can i get inapp browser user-agent?
- Text squeeze on flutter web, facebook in app browser
- Pass NameSpace to object and save to localstorage
- I am opening my signUp link in InAppbrowser,after completion of signup,It show navigate to the login page in the App
Related Questions in WEBFLOW
- Sticky Div inside HorizontalScrollView
- Workaround for Invalid search provider URL that is not owned by the developer when site is hosted in Webflow
- Sharing Webflow page on Twitter and thumbnail is missing
- Added domain to webflow without verification or adding any details to the host and now the website is gone
- Need assistance in adding devlink to react app
- Duplicated and HTML-Encoded JSON Schema Code in Webflow/CMS
- Navigating Sliders in style bar on Webflow
- Swiper JS - Go To Slide By Clicking On A Seperate Element
- Index of available user-only pages to a user
- Swiper.js CMS column grid doesn't stop when scrolling towards the right. (webflow)
- Webflow: How to Use Custom Short Links?
- How to import webflow into Angular > 9
- CSS animation slowed down/do not complete after adding more sections to page
- How to retrieve a multiple tables from a webpage using R
- Issue with absolute position on webflow
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Popular Tags
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Try using percentage-based heights, like
height: 100%. Thevhunit always refers to the largest possible height. Some mobile browsers will have that navigation bar at the bottom, sovhwill be equal to the viewport height + this navigation bar height. This means that when the page first loads, 100vh will actually be quite a bit taller than the viewable area.