Gambar responsive tidak bekerja pada firefox jika menambahkan add caption

Tadi malam ada pengalaman yang pahit berbuah manis. Pengalaman pahit nya, Saya terkejut ketika melihat gambar pada postingan tidak responsible pada seluruh resolusi, namun hal ini tidak terjadi pada seluruh gambar; dan buah manisnya adalah Saya bisa berbagi pengalaman tersebut.

Saya telusuri apa yang salah pada CSS, padahal dalam waktu yang lama, Saya tidak melakukan perubahan yang menonjol pada template ini. Setelah memperhatikan gambar, ternyata ada satu kesamaan untuk gambar yang tidak responsive ini; kesamaan tersebut adalah text dibawah gambar yang tertulis "klik gambar untuk memperbesar". Inilah yang menjadi penyebabnya.

Gambar dengan add caption pada browser mozilla firefox

Pada gambar dibawah, terlihat jelas jika gambar tidak responsible atau menyesuaikan ukurannya pada skala yang telah ditentukan.

Gambar dengan add caption pada browser google chrome

Beda hal-nya dengan browser google chrome, pada browser ini gambar tetap responsible walaupun telah ditambahkan add caption.

Add caption menambahkan code untuk penggunaaan tabel

Ketika menambahkan "Add caption" pada gambar, code gambar otomatis berubah dan akan menambahkan tabel pada kode tersebut, didalam tabel inilah akan ada penggabungan gambar dan text yang diketik pada add caption, lalu dipisahkan pada baris yang berbeda.

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiny3KG2nGYmH1qhChfMXlk0ozSBT4flXOriRXAKXWOq5Ya9-ahkBFXVrZLwLR0AvHIBaYf-8gReY0DoZnGo-tIUUmbh4ijD6O1sj4R3LxvS1lmElNvYgYq3YBd8RAGuGY3wWa5WX8o2wkN/s1600/gambar-tidak-responsive1.png" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #351c75;">Klik gambar untuk memperbesar</span></td></tr>
</tbody></table>

Responsible, add caption, tabel antara Mozilla Firefox
google chrome serta kompetitornya

Saya tidak berharap tulisan ini menjadi polemik di dunia maya, karena Saya pun masih mempelajari dan menganalisa, Apakah hal ini terjadi pada browser yang belum diperbarui, atau adanya beberapa plugin yang belum didukung, namun Saya menarik sebuah kesimpulan dari sebuah pengalaman yang terjadi pada responsive design yaitu;

1. Untuk tabel yang responsive, mungkin tidak perlu penambahan kode khusus pada browser google chrome (ini jika Anda tidak menambahkan height dan width)
2. Template yang responsible, wajib dicoba pada seluruh jenis browser dan seluruh perangkat mobile
3. Berdasarkan pengalaman, template responsive tidak bekerja pada opera mini versi lama
4. Browser safari pada Android menolak javascript pada menu navigasi (mungkin karena belum update)
5. Pernah Saya coba membuka blog ini pada blackberry, namun javascript untuk navigasi yang responsive tidak menampakkan wujudnya.
6. Sepertinya google chrome untuk perangkat desktop dan mobile lebih bisa memahami template responsive 

Jangan lupa baca Cara membuat gambar menjadi responsive. Semoga bermanfaat.