iOS 10: Kiểu CSS không được áp dụng trên thay đổi lớp

Question

Tôi đang sử dụng ionic với góc cạnh để tạo ứng dụng cho Android và iOS. Trên tất cả mọi thứ android đang làm việc tốt. iOS là vấn đề (tất nhiên).

Tôi đang áp dụng thay đổi lớp cho một phần tử bằng cách sử dụng ng-class. Tôi có thể thấy sự thay đổi lớp trong thanh tra safari trong HTML và CSS. Nhưng tôi không thấy những thay đổi trên màn hình. Cách duy nhất tôi có thể thấy sự thay đổi là nếu tôi thao tác với bộ chọn CSS (đơn giản như bật/tắt kiểu).

Đây là HTML với góc:

<div class="avatar-view__initial__question question-hide" ng-class="{'question-show': speech.captured === true, 'question-hide': speech.captured === false}">{{question.text}}</div> 

và 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; 
    } 
    } 

Như tôi đã đề cập, CSS LÀ đang được áp dụng, mặc dù tôi không thể xem sự thay đổi cho đến khi tôi thao tác bất kỳ kiểu nào (liên quan đến phần tử) trong thanh tra.

Đây có phải là lỗi không? hoặc một cái gì đó tôi có thể làm việc xung quanh?

CẬP NHẬT Tôi vừa thử thiết bị này trên thiết bị iOS 9 và hoạt động hoàn hảo. Nó có vẻ là một vấn đề 10.

CẬP NHẬT 2 Tôi cảm thấy đó là vấn đề về flexbox. Tôi đã cho họ điền vào màn hình như một cột, nhưng tôi đã đưa ra một chiều cao dưới cùng một không khi nó không có nội dung trong đó. Nó đã diễn xuất hài hước. Tôi định dạng lại html để làm cho nó hoạt động khác nhau. Nhưng tôi muốn giữ điều này ở đó trong trường hợp người khác đang gặp vấn đề này.

Answer 1

có thể là vấn đề của cache lưu trữ trong browser.just thử vô hiệu hoá cache và kiểm tra

Answer 2

Từ những gì tôi hiểu nó là một vấn đề của iOS 10 webview không tái dựng hình mẫu, mặc dù lớp đã thay đổi một cách chính xác và được áp dụng.

Vì vậy, những gì chúng tôi muốn đạt được là thực thi mẫu tái xuất hiện trên thay đổi lớp học. Chúng ta biết rằng lớp thay đổi mỗi khi thành viên đối tượng speech.captured thay đổi giá trị.

Vì vậy, chúng ta có thể thực thi tái render khi bất cứ khi nào giá trị này thay đổi bằng cách thêm một khoảng trống có điều kiện trả lại như thế này:

<span *ngIf="speech.captured"></span> 

<div class="avatar-view__initial__question question-hide" ng-class="{'question-show': speech.captured === true, 'question-hide': speech.captured === false}">{{question.text}}</div> 

Answer 3

thử này

.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; 
} 

.avatar-view__initial__question.question-show { 
    padding: 20px 10px 20px 60px; 
    height: auto !important; 
} 
.avatar-view__initial__question.question-hide { 
    height:0 !important; 
    padding:0 10px 0 60px; 
}