What is the reason behind the inability to overflow the Safari viewport?

My website, , has a footer that is clickable in Chrome but not in Safari. When users scroll to the footer in Safari, the screen jumps back to the top, making it inaccessible. Can anyone help me identify the issue?

Below is the CSS code for my React project:

@font-face {
  font-family: ubuntu;
  src: url(../fonts/Ubuntu-Regular.ttf);
}

body {
  position: absolute;
  font-family: ubuntu;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 200px !important;
  -webkit-overflow-scrolling: auto !important;
  -webkit-background-size: auto;
  background-size: auto;
}

* {    
  margin: 0;
}

Here is the app.css file:

Nav {
   position: fixed;
   top: 30%;
   right: 0;
   z-index: 1;
}

footer {
   -webkit-transform:translate3d(0,0,0);
   transform: translate3d(0, 0, 0);
   height: 200px;
   font-size: 12px;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: black;
   color: white;
   z-index: -3;
}

.footer-wrapper{
   display: table;
}

.footer-content{
   display: table-row;
   text-align: center;
}

.footer-icons{
   color: rgb(500, 500, 500, 0.5);
   height: 32px;
   width: 32px;
   margin: 8px;
   margin-bottom: 32px;
   margin-top: 32px;
}

.footer-icons:hover{
   color: white;
}

.main{
   background-color: white;
   position: relative;
   z-index: 0;
   height: 100vh;
   width: 100vw;
   -webkit-overflow-scrolling: auto !important;
}

.preloader{
   width: 100vw;
   height: 100vh;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
 }

Answer №1

Forget about setting the body to position: absolute; Just delete that line and everything will work fine.

To remove those unsightly scrollbars, simply include overflow-x: hidden; in the body styling - you'll only notice them when using a regular mouse, not a touchpad or magic mouse.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for ways to streamline your React and Vue projects by reducing the number of

Coming from a background in emacs and xterm, I am accustomed to working with just a few files and having complete control over my work. Now I am delving into the world of React and Vue, but I was taken aback when I saw the sheer number of files generated f ...

Issue with locale being undefined in NextJS Internationalization (i18n) Routing

Currently, I am delving into the realm of Next.js Internationalization (i18n) Routing for my personal website. Despite my efforts, the values for locale, locales, and default locale are displaying as undefined. (I am working with the most recent version of ...

The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature. <div class="form-floating" ...

Aligning an element in the middle of an image vertically

Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...

Creating a visual feast: A guide to crafting a stunning image gallery

Is there a way to ensure all the pictures in a table are the same size, orientation, and inline? Currently, my images vary in size and rotation. The CSS I have applied is styling only the first image differently from the rest. Any help is appreciated! CSS ...

Preventing Cross-Origin Resource Sharing for Dockerized React project's API request

I am encountering challenges while trying to run a detached dockerized React application that is making Restful calls to a dockerized Node.js microservice. The main issue I am facing is that the requests are being blocked by the CORS policy, showing the fo ...

What is causing the "draggable='true'" attribute to fail on a React-rendered component?

This situation is really frustrating me, and I am hoping that someone can offer some assistance. I'm working with a React.Component that looks like this: var Vehicle = React.createClass({ ondragend: function(e) { e.preventDefault(); ...

An issue was encountered during the prerendering of the page "/". For more information on this error, visit: https://nextjs.org/docs/messages/prerender-error Attempting to adjust the request (unable to determine

It's been four days and I'm still stuck. I've seen some suggestions to use axios and set the timeout or switch from HTTP to HTTPS when fetching data, but nothing has worked. I'm now four days behind deadline and the client is not going ...

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Hey there, wonderful people of StackOverflow! I am absolutely stumped and cannot figure out how to smoothly transition this color-changing text from its current state into a different solid color when the submit button is clicked. Is there a skilled indiv ...

I'm having trouble getting my Bootstrap Navbar list aligned in the center

I've been attempting to align my menu list items in the center of the bootstrap navbar but have had no success. Despite trying various CSS styles, the items remain on the left side. Please take a look at my HTML and CSS below and let me know if there ...

Encountering a 404 error during the npm install process for create-react-app

Encountering a 404 error when attempting to run either npm install create-react-app or npm install -g npm@latest. Error Log: 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe' ...

Is it advisable to keep an Axios instance with configured interceptors that rely on a state value in a state, ref, or useMemo?

Similar to the discussion regarding using Axios within components and store on Stack Overflow, I am facing a similar dilemma. Within my application, I manage a state called authorization which holds the necessary Bearer token value for Axios requests. Thi ...

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

The outcomes may vary even with identical fonts, character spacing, and line-height

When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged: HTML: <div> T ...

The best way to close a swipeable drawer from a different class

I'm feeling a bit puzzled by the explanation of SwipeableDrawer on the Material-ui website. Here's the setup I have: there's a Component called 'Sidebar' that opens a SwipeableDrawer when a user clicks a button on the appbar or swi ...

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

I'm currently using the react-fontawesome library in my project built with Next.js. However, I've encountered an issue when trying to include an icon inside the Link component. The error message is confusing and I can't seem to figure out wh ...

What is the method for placing text underneath your background image?

click here for image I am trying to set a full viewport background image by applying it to the body tag. Currently, I have successfully achieved this with the following CSS code: body { background-image: url(/picture.jpg); } However, I also want to displ ...

What is the recommended value for the auto-incremented ID field when using the POST method in Node.js?

Currently, I am utilizing the mysql package for NodeJs in order to Post Data to a MySqlDB. Below is an example of my code: app.post('/countries', (req, res) => { const country = req.body.country; const city = req.body.city; const t ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...