html - Fixed background image bug Chrome Mac -
i'm building website uses fixed background images transition between sections. currently, pure css. effect works on every browser i've tested in, except one: chrome on mac (version 33.0.1750.146 or version 34.0.1847.45 beta). seems work fine on chrome on pc.
what happens pretty strange...on scroll, image repeated , overlayed , overall distorted. after bit more scroll, disappears. not reappear on scroll up.
any ideas or solutions?!
current page: http://margusity.com/follies-beta
current screenshot (broken, chrome): http://cloud.ikilledtheinter.net/ulra
current screenshot (working, safari): http://cloud.ikilledtheinter.net/ulxh
seemingly relevant css:
.chris, .eric, { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; position: relative; z-index: 50; width: 100%; height: 100%; } .chris { background-image: url(../img/people/chris.png); } .eric { background-image: url(../img/people/eric.png); }
edit: seems fixed background element causing issue. removing "position:fixed" #behind (css not shown above) fixes issue above, not solve requirements. working on solution now!
i'm running same issue. looks site working now, can share solution?
edit: removing position: relative;
, setting html , body both have height: 100%;
solved problem.
Comments
Post a Comment