INFO : Masalah Imej "Background" Di Google Chrome
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.
http://imageshack.us/a/img801/7821/probo.jpg
Ini adalah bahagian atas page sebelum di'scroll' ke bawah.
http://imageshack.us/a/img607/4061/prob1y.jpg
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.
http://imageshack.us/a/img200/6082/prob2q.jpg
Ni hasil bila dah di'repair'. Background dah 'stay' ditempat yg sepatutnya.
So ini adalah cara untuk repair masalah ni.
Kod asal untuk background :background: url(/images/stories/bg.jpg) fixed no-repeat center center !important;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:background: url(/images/stories/bg.jpg) no-repeat center center !important;
background-attachment:fixed;Semoga artikel ini membantu. Last edited by Andy47 on 28-1-2013 02:55 PM
thanks bro share..bro suka guna chrome ke? saya selalu nak guna chrome
tapi appearance dia tu tak ada menu tab tak macam firefox.. trunks posted on 28-1-2013 07:13 PM static/image/common/back.gif
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. :)
Andy47 posted on 28-1-2013 09:12 PM static/image/common/back.gif
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.
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.background: url(/images/stories/bg.jpg) no-repeat center center !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
font: 80% Arial, geneva, helvetica, sans-serif;
margin:0 auto; Andy47 posted on 28-1-2013 10:18 PM static/image/common/back.gif
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 ;P
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?
trunks posted on 29-1-2013 04:23 AM static/image/common/back.gif
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. :P
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. :)
Andy47 posted on 30-1-2013 09:59 AM static/image/common/back.gif
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..
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.
http://www.inmotionhosting.com/support/images/stories/cpanel/2redirect.jpg Andy47 posted on 30-1-2013 03:51 PM static/image/common/back.gif
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
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 :)
Pages:
[1]