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 best solutions below
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
- x icon disappears in Webflow
- Why this Post method returns a 405 error?
- Figma to webflow - turning elements into vectors problem
- How to make an item in a flexbox container to expand on hover to 2 columns without moving/affecting the remaining items?
- If I make a website design using WebFlow, then export it and edit functions, links with the backend etc outside, how can I redit the design?
- Change size according to iframe content in webflow during run time
- Webflow development: How to integrate (global) custom JS code for best performance?
- Webflow form not submitting to hubspot
- How to overcome with webflow logic flow problem?
- Trouble with Stripe Integration using Javascript and Ruby
- GSAP text animation with mask color fails for alternate backgrounds
- converting Figma frame to webflow or wordpress
- Not able to connect webflow with github in an automated way. Changes made in webflow should be reflected in github
- How can I add custom code to Webflow Templates?
- How to edit a localized Webflow CMS collection
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)
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?
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.