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

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

csshovercss-filters

Guide on embedding child components in content using ngx-markdown within Angular version 14

I've been struggling to find a solution to this issue for some time now. We are receiving HTML content from an epi-server that needs to be dynamically rendered in a component. While ngx-markdown works well with standard HTML elements, it seems to ign ...

angularmarkdownangular-dynamic-components

Selenium was unsuccessful in finding the text on the webpage

Trying to extract Amazon reviews for a specific product, the text for ratings cannot be located using selenium. However, it can be easily extracted using soup. Link to page: Sample code using Soup: link='same link as mentioned above' url=requ ...

pythoncssseleniumwebdriverwait

What's the best way to create a unique shape for a Bootstrap div?

Can someone assist me in configuring the bootstrap div col-xs-2 to match the layout shown in the images provided? Your help would be greatly appreciated! Thank you in advance. https://i.stack.imgur.com/afd0p.png https://i.stack.imgur.com/0BGum.png ...

htmltwitter-bootstrapcss

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...

javascriptcssreactjsnext.js

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

Ngrx/effects will be triggered once all actions have been completed

I've implemented an effect that performs actions by iterating through an array: @Effect() changeId$ = this.actions$.pipe( ofType(ActionTypes.ChangeId), withLatestFrom(this.store.select(fromReducers.getAliasesNames)), switchMap(([action, aliases ...

javascriptangularngrxngrx-effects

The deletion request using the form in Express is experiencing issues and not functioning properly

When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...

javascripthtmlnode.jsexpress

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

Streaming Ogg audio from a PHP file is not possible to seek in Chrome

As I work on creating a basic audio player using the HTML5 audio element, the files being served are in .ogg format coming from another system as a binary string through an API. They are then processed by a simple PHP handler that includes some security ch ...

phphtmlgoogle-chromeaudiohttp-headers

Managing content in two separate divs at the same time using AJAX

I am curious to know how I can achieve a functionality where editing the text field on the left will automatically update the text field on the right. I have a feeling that it involves using AJAX, and I would like to implement it as well. Can anyone guid ...

htmlajaxformsjquery

Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again. These three boxes have their background set using css background-image. The click event is attached usin ...

jquerycssclickhover

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

javascripthtmljqueryselectcustom-data-attribute

Adding Information to a Material Design Card

Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...

htmlcssbootstrap-4angular-materialmat-card

Stop menu items from shifting when focused

I've developed a mobile hamburger menu and attempted to adjust the padding to create space between the text and the borders. Here's the HTML: #menu-solutions:hover .menu-item-text, #menu-solutions:focus .menu-item-text, #menu-solutions:ac ...

htmlcsswordpress

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

htmlcss

width restriction to only accommodate on two lines

Whether my text is short or long, I always want to ensure that it remains within two lines by defining the width of my div. Short Text +-------------------------+ | Short text goes here | | Short text goes here | +---------------------- ...

jquerycss

Trying to automatically select a checkbox upon page load in Angular 6

When the page loads, I want to automatically check a checkbox. Here is my component: var user = ViewprojectComponent.featuresList1; this.rules_id = user[0]; for(let i = 0; i <= this.rules_id.length; i++) { var checkedOn1 = this.rules_id[i]; this.Ru ...

angulartypescript