Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my 

<div className={`${classes.center} ${classes.or}`}>OR</div>
. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google Chrome and other browsers. My current Safari version is 12.

Please review the CodeSandbox link provided here

https://i.stack.imgur.com/2vKh5.jpg

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}
cssreactjsmaterial-uijss

Answer №1

The issue at hand is being caused by the css property transform. Rather than using that, try utilizing left: 0 for the before element and right: 0 for the after element. This adjustment should resolve the problem by ensuring both pseudo elements stick to their respective ends while maintaining equal width for proper UI adjustment.

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    left: 0
  },
  "&:after": {
    right: 0
  }
}

To view the corrected version in a sandbox environment, click on the following link: https://codesandbox.io/s/login-forked-4cbvm?file=/src/index.js

I hope this information proves useful in resolving the issue. Please feel free to reach out if you require further clarification or assistance.

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

unable to display preview images using the youtubev3 API

Currently in the process of creating a YouTube clone using the YouTube V3 API import React from 'react' import { Link } from 'react-router-dom'; import { Typography, Card, CardContent, CardMedia } from '@mui/material'; import{ ...

javascriptreactjsmaterial-ui

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...

csswordpresssafariwebkit

What steps do I need to take in order to activate scrolling in a Modal using Material-UI

Can a Modal be designed to work like a Dialog with the scroll set to 'paper'? I have a large amount of text to show in the Modal, but it exceeds the browser window's size without any scrolling option. ...

reactjstypescriptmaterial-ui

The entire DOM has been seamlessly replaced by React.JS within the Node.js server

I am currently focusing on practicing the MERN structure, so my goal was to start by setting up a node.js server and react front-end. However, I encountered an issue where the entire DOM gets overwritten once the server is fired up. This has left me wonde ...

javascriptnode.jsreactjsexpress

Steps for updating the value of a button in Typescript and React

I currently have a button that manages my language switcher, configured to handle cookies, URL changes, and now I want it to update the translations on the page as well. The <img> tag is utilized for changing the country flag. < ...

reactjstypescriptinternationalization

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

I am seeking to modify the button color in React by utilizing Material UI

Using the following version: npm view react version # 17.0.2 This is my code snippet: import React from 'react'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; import Image from "material ...

reactjsmaterial-ui

Exploring ReactJS: Combining JSON data with HTML elements

Recently, I started learning ReactJS. As I'm iterating through JSON data, I realized I need to incorporate some links into it. This is how my JSON data is structured: "text": ["For more information on the functionalities of the platform and services ...

htmljsonreactjs

What are the possible reasons for the failure of Material UI Theme overrides?

I'm having issues with the material UI "createTheme" function. I've added overrides for buttons and switches, but they are not working as expected. Surprisingly, only some features like theme palette and font-size seem to be working properly. Can ...

reactjsmaterial-uimaterial-design

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

javascripthtmlcss

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...

javascriptjqueryhtmlcss

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Troubles with caching on Amazon S3

Just starting out in web development and I'm working on updating HTML and CSS files stored on Amazon S3. Our website's backend is hosted on Heroku, while the front-end is on Amazon S3. Whenever I make changes to a CSS file, I can immediately see ...

htmlcssherokuamazon-web-servicesamazon-s3

Can someone guide me on the process of opening and closing a Material-UI Dialog within a Meteor/React application?

I'm attempting to create a dialog with a form that pops up when the user clicks a button. I followed the example on the Material-UI Dialog site for creating a button to open the dialog and adding a TextField within it. This is being done using Meteor ...

javascriptreactjsmeteormaterial-designmaterial-ui

Shifting the placement of a button with the help of bootstrap

Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...

csstwitter-bootstrap

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

ExceptionError: Unable to access the startsWith property of an undefined value

import React from 'react'; import AttributeDescription from './AttributeDescription'; class CompEntry extends React.Component{ render(){ let modifiedDescription; if(this.props.description.startsWith("_")){ modifiedD ...

node.jsreactjs

What is the best way to create a reusable component for this particular version of Autocomplete?

Can anyone help me figure out how to make this Autocomplete component reusable? I am using it multiple times but struggling with defining the necessary useStates. <Autocomplete required value={firstName} onChange={(event, newV ...

javascriptreactjsmaterial-ui

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion