Issue with rendering buttons and images with incorrect width and height in Safari

I'm completely lost here... My React project is using reactstrap and Bootstrap. It's functioning perfectly in Chrome, but in Safari, the images aren't loading and the buttons are displaying at half their intended height.

I tried switching to regular HTML5 buttons and adjusting image heights, but nothing seems to be making a difference. Since the issue persisted with standard HTML5 buttons, I assume it's not a problem with Bootstrap, but I could be mistaken...

Any suggestions on where to start looking for a solution?

Edit* Managed to somewhat fix it - the modal was originally set to a height of 90vh. I commented that out and now everything works. The modal does extend beyond the screen, but at least the content inside is functioning properly again. Does anyone have an idea why Safari is behaving this way?

https://i.sstatic.net/bnNsQ.png https://i.sstatic.net/Cxvf9.png

cssreactjsimagebuttonbootstrap-4

Answer №1

Regrettably, Safari may struggle with comprehending the vh unit.

If you're determined to utilize vh, I suggest employing a clever technique outlined on CSS tricks: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/.

In your scenario, using 90vh, consider this approach:

.modal-element {
  height: 90vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 90);
}

Subsequently, you can define this variable through JavaScript.

// First we calculate the viewport height and multiply it by 1% to obtain a value for a vh unit
let vh = window.innerHeight * 0.01;
// Next, we assign this value to the --vh custom property of the document's root
document.documentElement.style.setProperty('--vh', `${vh}px`);

This information should be beneficial to you.

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

Bootstrap 3 Full-Width Responsive Image Overlapping

I have designed a grid layout with col-md-7 on the left side and col-md-5 on the right side. The images in the col-md-5 are responsive and have a full-width of col-md-12. <div class="container"> <div class="row"> <div class="col ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to conditionally render a component twice without resetting internal states or unmounting?

I am working on a component that needs to be conditionally rendered with different styles. To achieve this, I approached the problem in the following way: import ComponentToRender from '../../ComponentToRender' const Main =()=> { const [expa ...

reactjsreact-hooks

What is the best way to display a 404 error page for a nonexistent child page on a WordPress site?

After building our site with WordPress, I noticed that non-existent child page routes are not being redirected. For instance, let's say we have a page called about-us with the URL http://example.com/about-us. If I try to access a non-existing child p ...

javascriptphphtmlcsswordpress

Using CSS or Bootstrap, align the image to the right side of the content

Struggling to align an image to the right of the content area, inspired by this Dribble shot. Check out the inspiration here This is what I've come up with so far: Link to my progress on CodePen .content { position: relative; } .bg-image { posi ...

htmlcssbootstrap-5

Having trouble with font family being undefined in React Native while working with vector icons. The build is prompting me to unlink the icons

After installing the Galio framework, I encountered an issue with React Native Vector Icons on my React Native project (non-Expo). I keep getting an "undefined font family" error, whether it's for Feather or Font Awesome. Despite trying the recommend ...

iosreactjsreact-native

Instruments for crafting an application compatible with a wide range of web browsers

Currently tackling various browser challenges. I find myself wondering whether it's achievable to create an application that is compatible with all browsers, or at least the majority. Should it be a web application? Any recommendations on frameworks a ...

javascriptjqueryperformancecss

Creating a text-only fadein/fadeout carousel using JavaScript with a similar functionality to Bootstrap

Is there a way to create a fade-in/fade-out text only carousel similar to the one on the header of this website using just a few lines of CSS and Javascript instead of including the whole Bootstrap framework? I examined the code of the website and it appe ...

javascripthtmlcsstwitter-bootstrapcarousel

Troubleshooting puppeteer PDF: Unable to set table height using CSS for tr:last-child { height: 100%; }

My Node.js code snippet is as follows: await page.setContent(html, {waitUntil: 'networkidle2'}); const pdf = await page.pdf({ format: 'A4', printBackground: true, margin: { top: '14mm', // default is 0, units: mm, c ...

htmlcssnode.jspuppeteer

Strategies for handling axios responses within a useEffect hook in Reactjs

Currently, I am working with Reactjs and implementing nextjs. I am facing an issue where I am using Axios for fetching data from an API, but I am struggling to display it on the page. To debug this, I have tried using console.log inside the useEffect fun ...

javascriptreactjsnext.js

Utilize Typescript with React to efficiently destructure and spread objects

My goal is to maintain my child components as stateless (functional components). Therefore, I am in search of an efficient way to pass down the root component's state values to its children. For example, interface IState { a: string; b: number; ...

reactjstypescript

Switch the checkbox back if an error occurs

I'm having an issue with a styled checkbox that appears to flip when clicked. Upon user interaction, the checkbox visually flips on the client side, while sending a request to save the change in a database on the server. In case of an error, I need to ...

javascriptcssangularjs

Having trouble with ion-item click not functioning in Ionic 3?

Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI ...

javascriptcssangularionic3angular6

Trouble retrieving desired data from an array of objects in React Native

I'm having trouble retrieving values from an array of objects in my state. When I try to access the values, it only prints out "[Object Object]". However, when I stored the values in a separate array and used console.log, I was able to see them. Here ...

javascriptarraysreactjsreact-native

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Maintain the Material UI TextField label at the top even when the text field is empty

I'm facing a simple issue that I can't seem to find a clear solution for. The labels in my setup are arranged as follows: https://i.stack.imgur.com/lPEid.png. At the bottom, the two fields have their labels on top due to default values, while t ...

reactjsmaterial-ui

Next.js is constantly fetching data with React Query

Within my Next.js project, I incorporated a query client into a page component, utilizing getServerSideProps for server-side rendering. The structure of the page is as follows: const Index = ({ configData }) => { const { t } = useTranslation(); cons ...

javascriptreactjsnext.jsreact-query

Material-UI - displaying fetched data in a DataTable results in an error: using "React.useState" within a callback is not allowed

I have been customizing ReactTables.js by making a copy and modifying it to showcase my own data. Initially, I stored the data in the /variables/general.js file and successfully displayed it in the table. Now, I am moving on to fetching the data from a RE ...

reactjsmaterial-uireact-hooks

Running a Node.js child process upon clicking an HTML button

I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...

htmlnode.jsreactjs

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss