Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS.
I am employing a class change on an element using ng-class. I can observe the class change in the HTML and CSS within the Safari inspector, yet the changes are not reflected on the screen. The only way I can visualize the modification is if I manually adjust the CSS selector (even as simple as toggling a style on/off).
Below is the snippet of HTML with Angular:
<div class="avatar-view__initial__question question-hide" ng-class="{'question-show': speech.captured === true, 'question-hide': speech.captured === false}">{{question.text}}</div>
And here is the CSS:
.avatar-view__initial__question {
text-align: left;
background-color: #E9EBEF;
font-size: 1.5em;
position: relative;
background-image: url(../img/icons/icon-ear.svg);
background-size: 50px;
background-repeat: no-repeat;
background-position: 10px center;
flex-shrink: 1;
@extend .css-animate;
&.question-show {
padding: 20px 10px 20px 60px;
height: auto !important;
}
&.question-hide {
height: 0 !important;
padding: 0 10px 0 60px;
}
}
Although the CSS styling is indeed being implemented, the changes remain unseen until I manipulate any style related to the element in the inspector.
Could this be a bug, or is there a workaround that I can implement?
UPDATE: After testing on an iOS 9 device, the functionality works flawlessly. The issue appears to be specific to iOS 10.
UPDATE 2: It seems like a potential flexbox problem. Originally, I had the elements filling the screen as a column, but encountered issues with the bottom one having zero height when there was no content. I restructured the HTML to resolve the issue, but I wanted to share this in case others are facing a similar problem.