it-swarm-id.com

Properti CSS3 webkit-overflow-scrolling: sentuh ERROR

iOS 5 merilis web designer -webkit-overflow-scrolling:touch properti baru yang menggunakan akselerator perangkat keras perangkat iOS untuk menyediakan scrolling asli untuk div yang dapat digulir.

Ketika diimplementasikan di situs kami dalam pengembangan, itu berfungsi tetapi tidak dengan baik. Saya percaya mungkin ada masalah CSS maka saya bertanya di sini.

biola berikut akan menunjukkan kepada Anda itu berfungsi dengan baik 

Jika Anda mampir ke situs kami dalam pengembangan, Anda akan menemukan panel yang sama di bawah tab fasilitas tetapi di iOS meskipun bergulir sempurna bagian meluap tidak ditampilkan dengan gambar secara harfiah dipotong menjadi dua.

http://www.golfbrowser.com/courses/mill-ride/

Saya tidak tahu bagaimana cara memperbaikinya http://www.golfbrowser.com/photo.PNG

57
Robin Knight

Seperti @relluf tunjukkan, menerapkan transisi 3D pada elemen relatif memperbaiki bug. Namun, saya menyelidiki sedikit lebih jauh dan tampaknya menerapkan -webkit-transform: translateZ(0px) juga berfungsi (ini adalah apa yang Google lakukan pada wadah peta gmaps) dan tidak perlu pada elemen yang relatif diposisikan, hanya keturunan langsung dari elemen yang dapat digulir.

Jadi, jika Anda tidak ingin secara manual menyimpan daftar semua tempat di mana perbaikan diperlukan, Anda mungkin melakukannya:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}
85
spheroid

Sungguh bugger yang mereka lepaskan di sini. Mencoba segala macam solusi sampai akhirnya saya menemukan satu-satunya properti yang dibutuhkan oleh elemen-elemen untuk dirender dengan benar dalam -webkit-overflow-scrolling:touch div: position: static 

Elemen posisi relatif dan absolut selalu terputus pada batas, dan benar-benar hilang (kecuali untuk ruang kosong) di luarnya. Jika Anda mengubah properti posisi secara dinamis, dari statis ke absolut, hanya bagian yang terlihat dari viewport div yang dapat digulir yang tetap dirender, di mana pun offset itu berada.

16
user1012566

Saya juga mengalami bug ini. Saya memperbaikinya dengan menerapkan css berikut ke elemen induk:

-webkit-transform: translate3d(0, 0, 0);

Namun, saya perhatikan bahwa memperlambat rendering dan mungkin memilih elemen input lain dari yang diinginkan ketika elemen input yang disentuh digulir ke tengah tampilan (oleh Safari/iOS).

7
relluf

Di iOS, ketika elemen di dalam elemen dengan set -webkit-overflow-scrolling: touch diposisikan secara absolut (atau fixed) relatif terhadap elemen di luar wadah gulir, elemen tersebut diberikan hanya sekali dan rendering tidak diperbarui karena elemen tersebut digulir. Contoh HTML:

<div class="relative-to-me">
  <div class="scrollable">
    <div class="absolutely-positioned">
    </div>
  </div>
</div>

Jika Anda memaksa render ulang dengan mengubah properti CSS (misalnya, di inspektur), Anda dapat melihat bahwa posisi elemen dirubah kembali ke lokasi yang benar. Saya menduga ini adalah hasil dari beberapa fitur kinerja untuk mengoptimalkan kinerja scrolling.

Solusi untuk masalah ini adalah dengan mengatur will-change: transform pada elemen yang diposisikan benar-benar (atau diperbaiki).

.absolutely-positioned {
    will-change: transform;
}
2
joeyhoer

Saya menyelidiki bug ini secara mendalam, saya juga membuat jsfiddle dan mengirimkannya ke Apple dalam laporan bug. Silakan lihat: Gambar iOS5 menghilang ketika menggulir dengan webkit-overflow-scrolling: touch Segera setelah Apple membalas kepada saya, saya akan melaporkannya pada topik itu sehingga Anda dapat tetap mendapatkan informasi terkini tentang ini bug yang sangat menjengkelkan

2
lucaferrario

Saya juga mengalami masalah di mana gulir overflow dengan -webkit-overlfow-scrolling diatur untuk menyentuh menghasilkan masalah ulang dengan elemen-elemen yang diposisikan. Dalam kasus saya, saya memiliki daftar di mana masing-masing item memiliki posisi relatif sehingga saya dapat menggunakan penentuan posisi pada elemen anak mereka. Dengan CSS di atas pada iOS 5, ketika pengguna menggulir konten yang tersembunyi ke dalam tampilan, ada penundaan sesaat sebelum itu mengubah layar untuk meninjau elemen. Itu sangat menjengkelkan. Untungnya saya menemukan bahwa jika saya memberikan posisi simpul orangtua relatif juga, ini diselesaikan.

1
Robert

Saya mencoba beberapa solusi yang berbeda, sepertinya tidak berfungsi dengan baik dalam kasus saya. 

Akhirnya saya menemukan cara bekerja dengan jQuery: 

Terapkan properti -webkit-overflow-scrolling setiap kali Anda menyentuh.

* Pada mulanya Saya Terapkan Juga -webkit-overflow-scrolling: auto when TouchDown , untuk menonaktifkan rendering iOS. Tapi itu membuat Page berkedip. Jadi saya menjatuhkannya, lalu bekerja dengan baik secara mengejutkan!

Periksa baris di bawah, semoga membantu:

<!-- ???? JQuery Functions-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

//???? Apply -webkit-overflow-scrolling in Every TouchEnd
$(document).on('click touchend', function(event) {
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"});
});

</script>



<!-- ???? html Elements & Style -->

<div id="TestDIV">
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
</div>

<style>
#TestDIV{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
}

#TestDIV .Element{
    width:300px;
    height:300px;

    margin: 2px;

    background-color: gray;

    display: inline-block;
}
#TestDIV .Element:nth-child(odd){
    background-color: whitesmoke;
}   
</style>
0
Corxit Sun

Bug masih ada di iOS 6. Jika masalah Anda terkait dengan position: relative, Anda mungkin menyelesaikan masalah dengan mengatur z-index: 1 sementara melalui JS. -webkit-transform: translate(...) tidak berfungsi dengan position: relative dalam kasus saya.

0
Bernd