INFO : Masalah Imej "Background" Di Google Chrome

Andy47

Salam / Selamat Sejahtera,

Since ada masa terluang sikit ni, waktu buat website to my client, ada 1 masalah berkaitan dengan background image menggunakan Google Chrome. Masalah ni HANYA akan timbul bila pembangun laman web tu nak buat background jenis 'fixed-position' dengan sedikit gabungan animation 'css coded'. Dalam kes saya, saya combined gambar background dengan animasi 'light ray' yang sentiasa berpusing. Sila refer rajah dibawah.

Ini adalah bahagian atas page sebelum di'scroll' ke bawah.

Bila 'scroll' ke bawah, background image yg sepatutnya berada di 'fixed-position' dah bergerak naik keatas sekali. Refer line kat dalam kotak hijau tu. NOTE : Masalah ni just saya jumpa di Chrome.

Ni hasil bila dah di'repair'. Background dah 'stay' ditempat yg sepatutnya.

So ini adalah cara untuk repair masalah ni.

Kod asal untuk background :

1. background: url(/images/stories/bg.jpg) fixed no-repeat center center !important;

Copy the Code

See? Nampak tak kita dah set supposed background image tu takkan bergerak waktu kita 'scroll' website tu? Tapi kenapa background ni ikut bergerak juga di Google Chrome (Di test pada Version 24.0.1312.56 m)?

SOLUTION : Ceraikan arahan 'fixed' tu dari code css diatas. So code css akan kelihatan macam dibawah ni:

1. background: url(/images/stories/bg.jpg) no-repeat center center !important;
   
2. background-attachment:fixed;

Copy the Code

Semoga artikel ini membantu.

trunks

thanks bro share..bro suka guna chrome ke? saya selalu nak guna chrome
tapi appearance dia tu tak ada menu tab tak macam firefox..

Andy47

trunks posted on 28-1-2013 07:13 PM
thanks bro share..bro suka guna chrome ke? saya selalu nak guna chrome
tapi appearance dia tu tak a ...

U r most welcome sis. Yup, mmg sentiasa guna chrome.Hehehe. Chrome adalah my primary platform untuk buat website sebelum di cuba pada mozilla. Selalu kalau pakai chrome ni, mmg confirmed penuh tab kat atas.

As a junior level, saya rekemen Chrome sebab platform ni lagi sensitif dari Mozilla. Contoh mcm website yg saya buat ni, yang hairannya mozilla tak ada masalah lansung untuk run animation tersebut + background image stay ditempat sepatutnya.

Masalah lain yang saya nampak waktu buat test project ni, slideshow di frontpage (effect slide dari kanan ke kiri) jadi 'freeze'. TAPI di mozilla everything is ok. Siap animation dia mmg lagi smooth dari Chrome. So bila kita build di Chrome then success, so for sure 95% website tu mesti ok bila dibuka di platform lain (kecuali IE.Hahaha).

Mozilla ni kena jaga more on iframe formatting+family font. Sbb biasanya ini je yg kat Chrome ok,tapi kat Mozilla tak ok. Jadi selalunya lepas siap buat website secara keseluruhan,saya akan run on Mozilla dan IE+handset.

trunks

Andy47 posted on 28-1-2013 09:12 PM
U r most welcome sis. Yup, mmg sentiasa guna chrome.Hehehe. Chrome adalah my primary platform untu ...

aha..teringin nak guna Chrome.sebab tak guna RAM tinggi berbanding Firefox..
tapi itula satu2nya tak suka tak jumpa menu tab dia ehe.

ye.font memang main peranan penting juga,macam saya selalu beli pizza online
kalau saya ubah font lain dari asal tak dapat beli pun sebab submit button
hilang, kalau tak ubah font dia ok..

create website bukan kah ada option untuk compatible dengan semua browsers?
tapi,saya cuma guna wordpress..selama ini ok,mungkin bro banyak buat flash
canggih website kan..then banyak nak kena configure.

Andy47

Yup, kita panggil cross browser setting. Tapi kekadang ada gak yang terpeleot. Saya xtahu lansung pakai flash. Kalau sikit2 kalau client betul2 request, saya pakai Swish je. Then website yang dibina dengan Flash biasanya lagi mahal+tak boleh diedit kecuali org yg bina tu. Saya buat website semua based on Joomla (lebih kurang mcm wordpress juga) cuma template saya kebanyakkan custom made. Boleh la takat sikit2 nak cari makan.

Untuk animation, saya pakai jquery atau css je sbb senang. Tak pakai flash since ipad/certain tablet tak support flash. Untuk more info ttg CSS code untuk buat simple animation, try google css transition/animation. Ada banyak contoh dari simple ke advanced animation just digenerated dari code je.

Anyway ini contoh cross browser code untuk make sure background image kita fullscreen.

1. background: url(/images/stories/bg.jpg) no-repeat center center !important;
   
2.         
   
3.         -webkit-background-size: cover;
   
4.         -moz-background-size: cover;
   
5.         -o-background-size: cover;
   
6.         background-size: cover !important;
   
7.         font: 80% Arial, geneva, helvetica, sans-serif;
   
8.         margin:0 auto;

Copy the Code

trunks

Andy47 posted on 28-1-2013 10:18 PM
Yup, kita panggil cross browser setting. Tapi kekadang ada gak yang terpeleot. Saya xtahu lansung pa ...

cuma template saya kebanyakkan custom made. Boleh la takat sikit2 nak cari makan.

yang bold tak boleh tahan nak gelak
theme buat sendiri memang terer,saya edit2 theme bolehla sikit-sikit
tetapi website flash very sucks untuk loading,maklumla kalau mobile
internet habis quota..tapi agak cun la sesuai untuk macam corporate..
atau kebanyakan yang tempah dengan bro orang bisnes?

Andy47

trunks posted on 29-1-2013 04:23 AM
cuma template saya kebanyakkan custom made. Boleh la takat sikit2 nak cari makan.

yang bold tak ...

Sorry sis lambat reply. Hahaha, mmg betul pun. Boleh takat cari makan je.

Bout website flash, tak silap saya ada 2 harga. Harga 'beli website sahaja' atau 'beli website bersertakan movie dia dalam format yg boleh diedit semula'. Yup, penggunaan flash dalam website skrg dah kurang since code css pun da boleh jadi animation. Boleh dikatakan dah xrelevan since movie flash ni biasanya harga dia tinggi.

Yang tempah dengan saya kebanyakkan org yang berniaga sendiri juga+kawan kawan.

trunks

Andy47 posted on 30-1-2013 09:59 AM
Sorry sis lambat reply. Hahaha, mmg betul pun. Boleh takat cari makan je.

Bout website flash ...

ohya bro..bro mahir cpanel tak..macam buat 301 redirection semua tu..

Andy47

Xde la mahir sgt. Tapi kat cPanel mmg dah ada function tu. Di column 'Domain' dah ada menu Redirect. So pilih either nak buat redirect 301 ( Permanent ) atau 302 (Temporary ). Then select domain yang nak di redirectkan. Then masukkan kemana sis nak redirectkan domain tu.

trunks

Andy47 posted on 30-1-2013 03:51 PM
Xde la mahir sgt. Tapi kat cPanel mmg dah ada function tu. Di column 'Domain' dah ada menu Redirect. ...

aha..ye betul sangat tu..cuma haritu saya ada masalah nak buat 301 redirection ke
blogger sebab blogger dia macam tak ada permalink..post2 yang dari wordpress
akan redirect ke 404..bro pernah tau ke hal ni..untuk jadikan blogger permalink
atau kita nak kena add permalink dari wordpress satu-satu ke blogger post

Andy47

Kepala say tergu'link' bila tgk banyak ayat link. About ni mmg saya xsure since saya xpernah dapat problem ni. Try tgk kat search result ni kot2 ada yang boleh solve problem tu. : Klik Sini Untuk Paparan Google Search Result