Perbatasan CSS diagonal masih tidak render dengan benar pada Firefox

Di hari ini bayarsaja.blogspot.com akan menyampaikan artikel tentang Perbatasan CSS diagonal masih tidak render dengan benar pada Firefox. Semoga dengan posting Perbatasan CSS diagonal masih tidak render dengan benar pada Firefox akan menambah pengetahuan bagi anda pembaca setia bayarsaja.blogspot.com

Judul cukup banyak mengatakan itu semua. Hari-hari ini saya bekerja pada sebuah proyek web kecil dan sekaligus menciptakan efek segitiga begitu dikenal menggunakan perbatasan CSS Aku sudah melihat inkonsistensi render beberapa di Firefox saya pikir mereka tetap sekarang.
CSS perbatasan di Firefox
Lihat demo
Mozilla Firefox adalah salah satu browser yang menggunakan anti-aliasing untuk perbatasan CSS diagonal. Tapi, tidak ada masalah sama sekali dengan anti-aliasing untuk perbatasan diagonal asalkan rendering dibuat sesuai. IE9 dan IE10, browser lain yang menggunakan anti-aliasing, melakukannya dengan benar tapi sayangnya saat ini Firefox tidak.Pertama masalah
Saya membaca dan tweeted beberapa waktu lalu sebuah artikel yang baik oleh Chris Morgan di mana ia menjelaskan bagaimana dan mengapa "transparan" CSS mungkin tidak transparan, terutama pada perbatasan diagonal.
Katakanlah Anda memiliki segitiga CSS berikut dibuat dengan:
div {border-top: 150px padat transparan;border-left: merah pekat 150px;}
Hal ini setara dengan:
/ * Red = RGBA (255,0,0,0) * /
div {border-top: 150px padat RGBA (255,0,0,0);border-left: merah pekat 150px;}
CSS berbatasan Firefox - transparan dibandingkan RGBASolusi
Jadi, untuk membuatnya bekerja dengan baik juga di Firefox, Anda perlu menghindari penggunaan nilai transparan dan menggunakan bukan warna RGB sesuai dengan alpha = 0.CSS ujung
Nilai transparan setara dengan RGBA (0, 0, 0, 0).Kedua masalah
Dalam proyek kecil saya, saya bilang sebelumnya, saya menggunakan pembatas blok abstrak dibangun dengan segitiga perbatasan CSS. Masalahnya adalah bahwa blok saya cukup besar, karena itu dimaksudkan untuk mematahkan dua bagian dari sebuah situs web.
Berikut contoh blok pembatas:
div {
    border-top: 70px padat RGBA (0, 255, 0, 0);
    border-left: hijau 600px;}
CSS berbatasan Firefox - contoh perbatasan besar
Jika Anda menggunakan Firefox, Anda dapat melihat transisi kabur pada diagonal yang disebabkan oleh anti-aliasing. Itu cukup menjengkelkan dan trik RGBA tidak menyelesaikannya.My solusi
Apa itu adalah solusi kotor saya menemukan saat bermain dengan itu:-moz-transform: scale (9999). Ternyata, skala kecil diterapkan tetapi visual Anda tidak akan melihat perbedaannya. Juga, secara teknis Anda tidak perlu awalan untuk transformasi ini sebagai Firefox dukungan yang unprefixed sejak versi 16.
Tapi, karena ini adalah hack Firefox saja, saya pikir menggunakan versi diawali adalah ide yang baik.
div {
    border-top: 70px padat RGBA (0, 255, 0, 0);
    border-left: hijau 600px;
    -Moz-transform: scale (9999);}
Firefox pengujian
Bad perilaku pada:

    * Mozilla Firefox 17.0.1
    * Mozilla Firefox 18,0 - beta channel
    * Aurora 19.0a2 (2012/12/06)
Sejauh yang saya diuji, tampaknya bahwa perilaku ini adalah tetap pada 20.0a1 Mozilla Firefox Nightly. Jadi itu berita benar-benar baik, bahkan jika kita harus menunggu til sedikit 'Mozilla Firefox rilis hit yang versi.

Dapatkan berita terupdate dan unik setiap saat hanya di bayarsaja.blogspot.com

Homepage|http://bayarsaja.blogspot.com