Văn bản textarea iOS bị ẩn khi sử dụng -webkit-overflow-scrolling: chạm

Question

Một lần nữa tôi ở đây vì tôi đã kiệt sức nghiên cứu về chủ đề này. Tôi có một thiết lập rất đơn giản với đánh dấu rất đơn giản và một hành vi rất lạ.

Hành vi tương tự eerily (Firefox and Angular: Textarea placeholder doesn't appear until first focus) nhưng tôi đang gặp nó trong một môi trường khác.

Xem xét đoạn mã có vùng văn bản chỉ đọc. Điều này mang lại một danh sách các bình luận xấu, trong đó 2-3 phù hợp trên màn hình trước khi phải cuộn thêm một số đã được tải nhận xét.

<div class="row"> 
     <div class="col-xs-2 text-right font-sm-dark" 
      style="height:20px; line-height:20px; font-weight:bold;"> 
      <label>Comment:</label> 
     </div> 
     <div class="col-xs-10 text-left font-sm"> 
      <div class="col-xs-12 text-left font-sm"> 
       <textarea style="text-align:left; width:100%; padding:0,0; line-height:normal; resize:none;" 
          rows="5" 
          ng-model="comment.Text" 
          readonly></textarea> 
      </div> 
     </div> 
    </div> 

này hoạt động tuyệt vời khi chạy các ứng dụng trên trình duyệt (chrome, safari, vv), nhưng một khi tôi xây dựng các ứng dụng sử dụng PhoneGap và chạy nó trên các thiết bị ipad tôi nhận được các hành vi sau đây:

Các nhận xét hiển thị đã hiển thị tốt trong văn bản. Khi tôi di chuyển xuống để đọc thêm ý kiến, textareas của họ trống rỗng NHƯNG nếu tôi chạm vào văn bản thì văn bản sẽ xuất hiện.

Sau khi di chuyển, các hộp Comment là trống cho đến khi "khai thác" trong iOS.

Tức là, không có CSS ​​phức tạp nào liên quan đến đánh dấu này và không có sự cố tải máy chủ lạ nào. Khi khu vực này tải nó mang lại tất cả các ý kiến ​​với nó.

Tôi muốn chỉ ra rằng đây là một ứng dụng di động lớn với chức năng đánh dấu/chức năng tinh vi hơn hoạt động tốt trên trình duyệt và dịch hoàn hảo cho cả ứng dụng dành cho thiết bị di động Android và iOS.

Liên kết đầu tiên tôi đăng lên dẫn tôi nghĩ rằng có một số lỗi lạ trong xử lý văn bản ng-touch tập trung vào khách hàng di động.

Bất kỳ ý tưởng nào? Tôi ghét phải đổ textareas cho đầu vào văn bản, nhưng tôi gần như ở điểm đó.

Answer 1

Vấn đề này được kích hoạt bởi các yếu tố textarea trong một container sử dụng:

-webkit-overflow-scrolling: touch 

trong container cha của nó.

Xóa lớp sẽ giải quyết vấn đề bằng 'văn bản ẩn ban đầu không tải' nhưng mất UX quán tính mong muốn.

Thêm

-webkit-transform: translateZ(0px) 

với phong cách của các yếu tố ảnh hưởng textarea tôi giải quyết vấn đề của tôi.

Trong trường hợp cụ thể của mình, tôi không tin rằng tôi sẽ phải chịu các hình phạt nghiêm trọng do các yếu tố ẩn mà tôi chưa cuộn đến sẽ không tải nội dung phong phú (video/hoạt ảnh/v.v.) sẽ đánh thuế VRAM trên thiết bị di động . Tôi về cơ bản tận dụng lợi thế của bối cảnh rendering bổ sung (phần cứng hỗ trợ) được kích hoạt bởi điều này, mà làm cho văn bản của tôi render bình thường, và do đó bỏ qua một BUG iOS.

lớn thông tin về translateZ (và translate3d của nó gần anh em họ (0,0,0)) http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/