The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form.

Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button element.

An unusual bug has been identified on Safari/Webkit browsers, specifically in versions 14 and above. Interestingly, this bug does not occur in previous versions of Safari.

Despite updating the CSS rules for the button's color when it is enabled, the text remains greyed out in these newer Safari versions. The Devtools show the correct color value in the computed property (refer to screenshots), but the browser fails to apply it.

Could this be a known issue that others have encountered?

Note: My project involves the material-UI framework, adding additional layers of complexity that make it challenging to provide a simplified code sample. However, since this issue appears only on specific platforms, it is likely that material-ui is not the root cause.

https://i.stack.imgur.com/MqtOP.png https://i.stack.imgur.com/QpW2A.png

cssiosmaterial-uiwebkit

Answer №1

This particular issue was identified in Safari versions 14.1 through 14.6, but thankfully it has been resolved with the release of version 14.7.

For more details on the root cause of this bug, please refer to this link.

You can also find additional insights and information about this issue here.

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

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

How to place a child <div> within a parent <div> that is fixed on the page

I am currently working on creating a modal window using HTML/CSS. My goal is to have the modal window fixed in position relative to the browser window, with a white background. Inside the modal, there will be an image at the top and a div element at the bo ...

htmlcss

Modifying the font style and color of text within the table header - Material Table version 0.19.4

Recently, I began using React and Material UI but have encountered an issue with modifying the color and font of text in the table header. Despite attempting to override it, the default style remains unchanged. It has been mentioned that utilizing "heade ...

cssreactjsmaterial-ui

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

javascriptjquerycss

Creating a full-width input field with text aligned to the right:

.wrap { white-space: nowrap; } input { width: 100%; } body { /* just so you can see it overflowing */ border: 1px solid black; margin: 40px; padding: 10px; } <span class="wrap"><input type="text">.pdf</span> Observing the cod ...

htmlcss

Steps to create a React Native application for testing purposes without relying on local dependencies

I am new to developing react-native apps and I have a question about sharing developed apps with other developers without local dependencies. Do we need an Apple developer account for a test build to be shared on iOS? How can this test build be created so ...

androidiosreactjsreact-nativeios-app-group

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

Simplified React conditional rendering made easy

Currently, I am utilizing React 16 with Material-Ui components. In my root component, I have a requirement to load a tab and a view conditionally based on a property. Although I have managed to implement this functionality, the code appears quite messy a ...

javascriptreactjsmaterial-ui

How to Align Paypal Button in the Middle of a Table Cell within a Concealed Form Using HTML and

Currently, I am in the process of developing a payment page that enables payments through Paypal using Instant Payment Notification. The initiation of this process involves sending a POST request to Paypal via a submit button along with multiple hidden for ...

htmlcssalignmentvertical-alignment

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

htmlcssreactjs

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position lock ...

javascriptcssreactjs

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss

Is there a way to interact with a Bootstrap 5 dropdown in React without triggering it to close upon clicking?

I'm currently working on creating a slightly complex navigation bar using Bootstrap 5 and ReactJS. The issue I'm encountering involves the dropdown menu within the nav bar. Whenever I click inside the dropdown, even if it's just non-link te ...

htmlcssreactjsbootstrap-5

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

Leveraging the 'styled()' utility from the MUI System while incorporating extra properties (Typescript)

I'm currently tackling a project using MUI System v5. I've opted to use the styled() utility (not styled-components) for styling and creating basic UI components. TypeScript is being used in this project, but I am facing a number of challenges as ...

reactjstypescriptmaterial-ui

The drop-down menu fails to appear when I move my cursor over it

#menu { overflow: hidden; background: #202020; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; position: relative; padding ...

javascripthtmlcssreactjs

Creating a customized form with React Hook Form and Material UI Field Array to store individual values for each field

I am encountering an issue while integrating react-hook-form with MUI. Scenario I am developing a form for users to upload products and select categories. Each main category has sub-categories, but I only need the data of the sub-categories. Users can ch ...

reactjsformsmaterial-uistatereact-hook-form

Is it possible to enable CSS margins to collapse across a fieldset boundary in any way?

One interesting CSS behavior is that adjacent vertical margins typically collapse into one another. In other words, the space between elements will be equal to the larger margin instead of the sum of both margins. Interestingly, fieldset elements do not f ...

cssmarginfieldset

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

htmlcss

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

jquerycss