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

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

ioscssiframeresponsive-designmobile-safari

Expanding the Warnings of React.Component

When I create a new class by extending React.Component in the following manner: export default class App extends React.Component<any, any > { constructor (props: React.ReactPropTypes) { super(props); } // other code } I encountere ...

reactjstypescript

Error property for text field validation in Material UI allows for easy checking and validation of

In my React UI app, I am implementing an error property to highlight a text box in red when it exceeds the maximum character limit. The logic for this is based on https://mui.com/components/text-fields/#validation Currently, the red color only appears whe ...

reactjsmaterial-uitextbox

Issue with Bootstrap flash alert CSS on mobile devices is not functioning properly

I am in the process of developing a Rails application. Within my app, I utilize Bootstrap's CSS for displaying flash messages on alerts. Instead of fully incorporating Bootstrap's CSS, I only integrate styles related to alerts in order to prevent ...

javascripthtmlcssruby-on-railstwitter-bootstrap

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

cssangularangular-material

Refreshing a collection of objects in the MERN stack

Here is a glimpse of what an object in my "records" model looks like: { "_id":"62f937aa0ed0f743593714b2", "amount":50000, "provisionMonths":[ { "month":"October 2022", "status":-1, "monthlyAmount":10000, " ...

node.jsreactjsmongodbexpress

Consecutive API requests within React context

When I'm developing locally, I encounter the error message Error: Rendered more hooks than during the previous render. in my application when refreshing the page. I suspect this is happening because I am making two calls within my provider. The first ...

reactjstypescript

The issue experienced in next-auth is due to a TypeError where the function res.getHeader is not

Currently, my focus is on the next 13 along with utilizing the next-auth. I've encountered an error stating TypeError: res.getHeader is not a function while validating the API by using getServerSession(req, res, authOptions) to determine if the user i ...

reactjsnext.jstypeerrornext-auth

What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS. #videowall-grid{ width:700px; border:1px dotted #dddddd; display: none; margin: 5px auto; padding: 5px; } #videowall-grid .square{ padding: 5px; margin: 5px; bo ...

htmlcss

Can Template literals be used for naming Components in React?

Have you ever tried dynamically routing in ReactJs? I attempted to use Template literal for generating the Component name, but it's not working as expected. Any suggestions on how to achieve this or is it not allowed? <Routes> { Object.keys( ...

reactjsreact-routerreact-router-domstring-literals

Refreshing React by injecting iframe with highest z-index after modifications (development)

I am facing an issue with my Create React App and its .env file setup as shown below: BROWSER=none SKIP_PREFLIGHT_CHECK=true INLINE_RUNTIME_CHUNK=false Whenever I run the app using yarn start, the server updates without refreshing the page or losing any s ...

reactjscreate-react-app

The issue of font settings not being recognized in NextJS/React

My website allows users to sign in, and I have specified the font for the title as "Carter One". However, when a user signs in, a different font appears that I did not specify. Interestingly, if I click the Refresh button, the correct font will then appea ...

reactjsfontsnext.jsmaterial-ui

The Next JS build process is failing to generate certain paths

Issue with Anime Database App Deployment A problem arose when I developed an anime database app using Nextjs and deployed it on Vercel. Although the build was successful and the initial page rendered properly, only a few dynamic routes displayed correctly ...

javascriptreactjsnext.js

Issue regarding locating Material-UI components while resolving TypeScript modules

I am encountering an issue with my Visual Studio 2019 (v16.3.2) React TypeScript project that involves Material-UI components. The TypeScript compiler is unable to resolve any of the @material-ui imports, resulting in errors like the one below which preven ...

reactjstypescriptmaterial-uivisual-studio-2019

Exploring JSON data with ReactJS

I am experiencing issues with populating a table with data imported from a JSON file. The error message I'm receiving is: Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {list}). If you intended to render ...

javascriptjsonreactjs

Chic and perfectly aligned stripe button design

I need assistance with centering and styling the Stripe checkout button labeled "update card." Additionally, I want to adjust the appearance of the card number input field to be normal but readonly. How can I achieve this without relying on Bootstrap' ...

htmlcsstwitter-bootstrapstripe-payments

Is there a way for me to view the properties within the subcomponents?

Working on a project to create a bulletin board using React, following the official documentation. Decided to consolidate all actions related to the bulletin board into one alert component called AlertC. In the Form onSubmit statement, if the title is tr ...

javascriptreactjs

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly. Below is the animation code: @keyframes fadeInUpBig { 0% { ...

htmlcsscss-animations

What is the best way to center a parent container vertically?

I currently have a main grid with grid items that are also containers, set as inline-sized containers to allow for different internal layouts based on their width. How can I horizontally align the main grid in the center once it exceeds a certain width? A ...

csslayoutcss-gridcontainer-queries