Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices.

The problem in Safari arises when loading a form that contains disabled inputs, as shown in the screenshot below:

https://i.stack.imgur.com/XU6jg.png

If I enable and then disable the inputs again, they render properly like this:

Enabled Version

https://i.stack.imgur.com/kVC1i.png

Disabled Version

https://i.stack.imgur.com/SnpGb.png

Although I attempted to create a stackblitz example to replicate the issue here, I was unsuccessful in doing so.

I suspect that certain css styles or the angular flex-layout may be causing this behavior, but I am uncertain how to confirm this theory.

Oddly enough, when I zoom in and out on the device, the inputs display correctly, adding to the confusion.

Regrettably, I cannot share the entire code, but I will update the stackblitz example to closely mirror it as much as possible.

Has anyone else faced a similar issue? Any information would be greatly appreciated, as I have dedicated numerous days to resolving this without success.

htmlcssangularangular-materialangular-flex-layout

Answer №1

Through much experimentation and troubleshooting, it became evident that this error occurs when an empty object is created and displayed before the actual data is received from the server.

The client display was initialized to easily bind to its properties without the need to constantly check for null or undefined values.

client: Client = new Client();

The form component was rendered first, only to be replaced by the fetched data from an HTTP request.

Interestingly, iOS Safari failed to calculate the height correctly if the input fields were empty upon initial rendering.

To resolve this issue, I implemented a condition to check if the object exists before displaying it, using a simple *ngIf statement.

While this may be considered a workaround, I hope this solution proves helpful to others encountering the same problem in the future.

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

Conditional rendering is effective for displaying a form item based on certain conditions, but it may not be as effective for

I want a textarea element to appear or disappear based on the selected state of the radio buttons before it. If "no" is chosen, the textarea will be hidden, and if "yes" is chosen, the textarea will become visible. <fieldset class="input-group form-che ...

javascripthtmlvue.jsdata-binding

Having trouble with Angular deeplinks - my app is opening but the routing isn't working as expected

Help needed: I'm facing an issue with deeplinks in my app where the routing is not working properly. Below is the code snippet causing the problem: import { Component, ViewChild } from ‘@angular/core’; import { App, Platform, Nav, NavController ...

angularionic-frameworkionic3cordova-pluginsionic-native

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Eliminate the see-through effect from a logo positioned in a fading container

I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-inde ...

jqueryhtmlcsssvg

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

I have created a multi-select checkbox form, and I've added some JavaScript to ensure that the visitor selects at least one option <div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option&l ...

javascriptphpjqueryhtml

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

htmlstruts2

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...

javascripthtmlcssvalidationbrowser

Leveraging tailwind for achieving dynamic height responsiveness

My Tailwind-built page currently has a table in the bottom left corner that is overflowing, and I would like it to adjust its size to fit the available space and scroll from there. I want it to fit snugly in the bottom left corner of the browser viewport ...

csstailwind-css

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

javascripthtml

Choose a Spot on the Open Layers map using a marker or icon

As a beginner in the world of Open Layers, I'm eager to learn how to utilize markers or icons to obtain user location. Additionally, I hope to harness the power of Angular to extract these location details. ...

angularopenlayers

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

javascripthtml

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

I am trying to create a function that will broadcast data from the server upon button click, and then navigate to a new route using $state.go('new-route'). In the controller of this new state, I want to retrieve the transmitted data. However, whe ...

javascripthtmlangularjseventsangular-ui-router

Displaying Dates in an Express Application using EJS

I have a MySQL table with a column containing date data. I am building a webpage to display this data in a more user-friendly way. Currently, the displayed result looks like this: I would like the dates in the column to be formatted as something like ...

javascripthtmlnode.jsexpressejs

When the application initializes, the Child Component is activated

There's a scenario where I need to trigger a component named 'cancellation' when the user clicks a button in another component called 'names'. To achieve this, I set a flag called loadCancellation to true when the Search button is ...

angularangular-materialangular6

Alternative background for browsers that do not have support for border-image styling

I am experimenting with CSS3 border-image to create a simple button design: the left slice of the image is intended to be the left border of the text, the right slice as the right border, and the middle slice should either repeat or stretch as a background ...

fallbackcss

Transfer the current Angular project to operate as a separate entity

After successfully migrating my Angular project from version 13 to version 16 step by step, I am now aiming to make it fully standalone before proceeding with the migration to version 17. I am wondering if there is a utility available that can assist me i ...

angulartypescriptangular-standalone-componentsangular-migration

Executing a function a specific number of times in Jquery

I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...

javascriptjquerycss

Guide on integrating an Angular 10 Component into a cell in Ag-Grid

I am currently working with an Angular10 component, specifically a toggle switch, that I need to integrate into a specific column within my ag-grid cell. Currently, I am using a basic HTML checkbox in the following manner: colDefs: ColDef[] = [ { fiel ...

angularag-gridangular10

Angular device redirection allows you to automatically redirect users based on the device

Currently in my Angular project, I am attempting to dynamically redirect users based on their device type. For example, if the user is on a Web platform, they will be redirected to www.web.com. If they are on an Android device, they should go to www.androi ...

angulartypescript

Error: Unable to access the 'resource' property as it is undefined

I am currently working on a project that involves fetching the latest 4 results from Craigslist using a query. Although I have successfully retrieved all the relevant information, I seem to be encountering an issue with loading the URL of the image from th ...

javascriptjqueryhtmljson