When tapping on grid items in the Safari browser using React Material-UI, they mysteriously switch positions

I've encountered an issue with grid Items in my React MATERIAL-UI project, specifically in the Safari browser. The problem does not occur in Chrome or Firefox.

Within the grid, there are checkboxes that move from one place to another when clicked, a behavior unique to Safari.

To better illustrate the issue, I've created a 20-second video on YouTube: https://youtu.be/dGdayLJgLCE

Please watch the video until the end to see the problem in action.

<Box mt={6}>
          <Container
            maxWidth="md"
          >
            <Grid container justify="space-around" alignItems="center"  >
              {_map(_omit(activities, "other"), (selection, activity) => {
                const handleClick = experienceLevel => () =>
                  toggleExperience(experienceLevel, activity);
                return (
                  <Box m={1} key={activity}>
                    <Grid
                      item
                      container
                      // justify="left"
                      // alignItems="left"
                      justify="center"
                      alignItems="center"
                      direction="column"
                      className={classes.item}
                      wrap={"nowrap"}
                      style={{ width: "100%" }}
                    // shrink={false} 
                    >
                      <Typography variant="h5" component="h5" gutterBottom>
                        {activity}
                      </Typography>
                      <FormGroup>
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "beginner"}
                              onChange={handleClick("beginner")}
                              name="beginner"
                            // shrink={false} 
                            />
                          }
                          label="beginner"
                        />
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "intermediate"}
                              onChange={handleClick("intermediate")}
                              name="intermediate"
                            // shrink={false} 
                            />
                          }
                          label="intermediate"
                        />
                        <FormControlLabel
                          control={
                            <Checkbox
                              checked={selection === "advanced"}
                              onChange={handleClick("advanced")}
                              name="advanced"
                            // shrink={false} 
                            />
                          }
                          label="advanced"
                        />
                      </FormGroup>
                    </Grid>
                  </Box>
                );
              })}
            </Grid>
            <Grid container justify="center" alignItems="center">
              <Box mt={3} className={classes.textFieldContainer}>
                <Typography variant="body1" component="h3" gutterBottom>
                  Describe the other activities you are interested in:
              </Typography>
                <TextField
                  fullWidth
                  id="outlined-multiline-static"
                  multiline
                  rows="4"
                  placeholder="Let us know!"
                  variant="outlined"
                  color="secondary"
                  onChange={handleChange}
                />
              </Box>
            </Grid>
          </Container>
        </Box>
        <NextBtn
          disable={_includes(activities, false)}
          href="/registration/14"
        />

If you have any insights on how to resolve this issue, please let me know.

Answer №1

Give this CSS snippet a shot and see if it does the trick: -webkit-appearance: none!important;

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

Issue with passing props to screen not displaying on initial load

Greetings, I'm a newcomer to the world of react native and currently facing an issue: const Tab = createMaterialTopTabNavigator(); export const CurriculumMenu = ({navigation, item}) => { const data = item.Title; console.log(data) return ( ...

The camera feature in Ionic Cordova seems to be malfunctioning

I am attempting to implement the ionic cordova camera feature. Here is the code snippet I have: HomePage.html <ion-view view-title="Example"> <ion-content> <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}"> <img ng-s ...

Design inspiration for a multilingual application with React, React Redux, React Context, and Material UI components

In my current project using React and Material UI, I am required to implement language localization for the user interface. The application needs to support 5 different languages, and I want to ensure that it is as responsive as the Material UI documentati ...

Dropzone failing to verify the maximum file limit

I am currently using dropzone to upload files on my website. I have limited the number of files that can be uploaded to a maximum of six. The code works perfectly when uploading one image at a time, but if I select more than six images by holding down the ...

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

What are the best ways to prevent JavaScript and CSS from blocking the render?

I ran my webpage through Google PageSpeed Insights and it keeps flagging an issue with render-blocking JavaScript and CSS in the above-the-fold content. The report indicates that there are 17 blocking scripts and 11 blocking CSS resources on the page. De ...

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet: $(document).on("click",( ...

[code=access-denied]: Access denied for this project resource

Encountering a firebase error: https://i.sstatic.net/IVq7F.png In my project using react-hooks-firebase, with react and TypeScript, I encountered an issue after adding true to the firebase database... https://i.sstatic.net/5gQSD.png firebase.ts: After ...

Saving similar and dissimilar information in a database

I have been working on implementing a Like and Unlike feature for users to interact with products. Following this tutorial at , I've completed the necessary steps. However, I'm facing an issue where the likes are not being stored in the database ...

Encountering a glitch when trying to play Wistia videos using react-player, resulting in the frustrating message: "The XMLHttpRequest constructor has been altered."

I embedded a ReactPlayer in my code as shown below: <ReactPlayer ref={this.ref} className="storyPlayer__reactPlayer" width="100%" height="100%" url="https://getleda.wistia.com/medias/bjz07hdxqx" ...

Discovering a specific string amidst two other strings across multiple lines in php

Having the source code of an old website with significant javascript arrays to retrieve, the task seems daunting for manual extraction. The data now needs to be integrated into a database, prompting the idea of creating a parser in PHP to gather the data i ...

Synchronizing timers among different elements

Just a little context: I'm diving into the world of React and currently working on a small app using next.js (with a template from a tutorial I followed some time ago). Lately, I've encountered a challenge where I need to synchronize a timer betw ...

How can I exclude a specific JavaScript asset file in Symfony2?

My default setup includes loading all scripts into the head section from the js/ folder. However, I need to exclude one specific script file from being loaded with the others. How can I achieve this? Code base.html.twig .... {% block javascripts %} { ...

Is there an easier method to assign text to a modal-body using a specific classname?

Utilizing Bootstrap 5.1.3 alongside Pure Vanilla JavaScript, I have successfully been able to populate the .modal-body with content using the following code: function showBSModal(modalid, inputid) { var myModal = new bootstrap.Modal(document.getElement ...

The latest pathway fails to refresh in NextJs

I've implemented a search bar at the top of my app which directs to /search/[searchId].js page: <Link href={`/search/${search}`}> <button type='submit' className='btn-cta btn-3'>SEARCH</button> < ...

What could be causing the decrease in speed of my Three.js animation within Vue.js?

I attempted to replicate the impressive wave simulation from this CodePen link: https://codepen.io/cheekymonkey/pen/vMvYNV, using Vue.js. However, the animation seems to be running significantly slower when implemented in Vue.js. In my effort to recreate ...

The issue arises when React child props fail to update after a change in the parent state

Here's the main issue I'm encountering: I am opening a websocket and need to read a sessionId from the first incoming message in order to use it for subsequent messages. This should only happen once. I have a child component called "processMess ...

The homepage is displayed below the navigation bar

import Home from './components/Home/Home.jsx' import Navbar from './components/Navbar/Navbar' import {BrowserRouter, Routes, Route} from "react-router-dom" export default function App() { return ( <BrowserRouter> ...

Organize and display a list of contacts alphabetically by the first letter of their

I have a list of contacts that I need help with. Despite searching on Stack Overflow, I couldn't find the answer. Can someone please assist? Thank you. export const rows = [ { id: 1, name: 'Snow', email: 'Jon', co ...

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 ...