Material-design-lite: Penempatan tooltips yang buruk

Dibuat pada 8 Jul 2015 · 3Komentar · Sumber: google/material-design-lite

Lebih banyak kasus tepi tetapi tetap terjadi di aplikasi yang sedang saya kembangkan. Skenario ini hanya terjadi jika bilah gulir ada dan elemen yang dimaksud memiliki terjemahan yang diterapkan melalui CSS.

Lihat contoh di sini (arahkan kursor ke kotak merah)

Sesuatu seperti ini secara teoritis akan memperbaiki masalah (saya pikir)

let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;

// now we have a more accurate representation of the current top / left coords

P1 Tooltip

Sumber

brandonjpierce

Komentar yang paling membantu

sampai!

Perilaku yang diamati benar sesuai dengan spesifikasi CSS :

Untuk elemen yang tata letaknya diatur oleh model kotak CSS, nilai apa pun selain tidak ada untuk hasil transformasi dalam pembuatan konteks susun dan blok penampung. Objek bertindak sebagai blok yang berisi untuk keturunan yang diposisikan tetap.

Tooltip kami diposisikan menggunakan position: fixed . Itu berarti, dengan menerapkan transformasi – bahkan jika itu adalah NOP – Anda memindahkan titik asal untuk pemosisian tetap.

Perbaikan yang mudah adalah dengan memindahkan tooltip ke wadah lain (atau body ).

surma pada 9 Jul 2015

👍4

Semua 3 komentar

Bug yang menarik. Saya dapat mengonfirmasi itu terjadi karena transformasi, tetapi saya tidak mengerti _why_. Ini harus diatasi karena ini bisa menjadi hal yang cukup umum dilakukan sekarang dengan dorongan baru-baru ini untuk animasi oleh web.

Garbee pada 8 Jul 2015

sampai!

Perilaku yang diamati benar sesuai dengan spesifikasi CSS :

Untuk elemen yang tata letaknya diatur oleh model kotak CSS, nilai apa pun selain tidak ada untuk hasil transformasi dalam pembuatan konteks susun dan blok penampung. Objek bertindak sebagai blok yang berisi untuk keturunan yang diposisikan tetap.

Tooltip kami diposisikan menggunakan position: fixed . Itu berarti, dengan menerapkan transformasi – bahkan jika itu adalah NOP – Anda memindahkan titik asal untuk pemosisian tetap.

Perbaikan yang mudah adalah dengan memindahkan tooltip ke wadah lain (atau body ).

surma pada 9 Jul 2015

👍4

Hm, sangat menarik. Setidaknya kita tahu sekarang dan bisa mengarahkan orang ke sini jika muncul lagi. Terima kasih telah melakukan penelitian @surma!

Garbee pada 9 Jul 2015

Apakah halaman ini membantu?

0 / 5 - 0 peringkat