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

Ways to customize the border color on a Card component using React Material UI

Is there a way to change the border color of a Card component in React Material UI? I attempted using the style property with borderColor: "red" but it did not work. Any suggestions on how to achieve this? ...

javascriptreactjsmaterial-ui

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

Adjust the arrangement of divs when resizing the window

I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...

htmlcsssassflexbox

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...

javascripthtmlreactjsdommaterial-ui

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

Ways to automatically expand or collapse a Tree Item in Material Ui using code

Is there a method to automatically expand and collapse tree elements in material ui using programming? While I can manually do this by clicking on the item, there are instances when I need to collapse or expand the tree based on an action within the tree ...

reactjsmaterial-ui

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

I am trying to achieve a specific effect on the ui-views <md-card id="sidebar" flex="20" class="sche-card" layout-padding="true"> <div ui-view="card" autoscroll="false"></div> </md-card> However, I am facing an issue where the car ...

cssangularjspartialsangularjs-material

Interested in creating Facebook-like notifications using React JS and Redux, with a notification count displayed on the icon?

I am currently working on a React-based web application and I would like to incorporate notifications for various actions such as receiving friend requests and confirming them. I want to create a notification system similar to Facebook's, where a coun ...

reactjsnotificationsreduxreact-reduxmaterial-ui

Buttons missing from iOS 10.3.3 navigation bar display

I am facing an issue with my UINavigationBar displaying buttons on different iPhone models. On iPhone 7 with iOS 11, all 3 buttons show up correctly, but on iPhone 5 with iOS 10.3.3, only the right button is visible in the navigation bar. What could be ca ...

iosswiftuinavigationbar

Hidden menu does not work with Jquery

As I work on creating a responsive website, I am faced with the challenge of implementing a menu that only opens on mobile devices when clicked. I came across some code on Stackoverflow that I thought would solve this issue for me. However, I seem to be en ...

phpjqueryhtmlcss

The UIActivityIndicatorView is failing to appear when expected

In my IOS application, I am creating a form for users to input data. This form requires the user to enter repetitive data which can sometimes lead to delays in the process. To address this issue, I want to display a UIActivityIndicatorView while the form i ...

iosuiactivityindicatorviewuiviewanimation

Unable to manipulate or customize the V-slot component

I recently implemented the v-flip feature on my Nuxt webpage, resulting in the following template: <div class="about__cards"> <vue-flip class="about__single-card" active-click width = "350px" height="450px"> <template v-slot:front> ...

cssvue.jsnuxt.jsv-slot

customizing the MuiTheme overrides to tailor the style of a specific component

Is it possible to customize the default style of a specific Material UI component? For example, if I want different styles for different types of MuiButton's... <Button color="primary" variant="contained">Foo</Button> <Button variant=" ...

material-ui

Converting a Page-based iOS App into a Tab-Based Interface

Is there a method in Xcode to switch from one preset app format to another without starting from scratch? For example, changing from a page-based layout to tabs within the same app. I currently have an app designed like a book with only one "page", but I ...

iosxcode

Is it achievable through CSS alone to eliminate the bullet point in a UL list when it consists of just a single item?

Is it feasible to achieve a solution using CSS alone that remains functional even on IE8, ensuring the following criteria: If a <ul> list contains 2 or more items, then maintain the bullets in front of each item as per usual. When there is only one ...

css

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

htmlcss

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

ioshtmlcssipad

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

javascripthtmljquerycssbootstrap-5

Tips for personalizing your Magento 2 theme

As someone new to Magento 2 and front-end development with a basic knowledge of HTML and CSS, I am eager to customize the blank theme in Magento 2 to gain a deeper understanding of how things work. However, despite reading through the documentation, I am u ...

cssxmlmagento2

Using image paths in CSS for styling purposes

As I develop an Asp.net website, I've encountered a surprising issue. Here is my folder structure: - Styles - master.css - Images -webPages -scripts When trying to access an image in the Images folder from the CSS file, I receive a ...

asp.netvisual-studio-2010cssbackground-image