css - Images disappear during translate3d on Chrome for iPhone and iPad -


i have coverflow type image gallery have created mobile picture viewing. first iteration lives here: http://codepen.io/jasonmerino/pen/fsloq.

i've wired touch events , seems going mobile safari on iphone , ipad, when go view on chrome iphone or ipad images disappear during part of css translate3d moves images sides.

i have added -webkit-backface-visibility: hidden; of markup comprises swiper, not fix disappearing act images doing.

what missing here? appreciated. thanks!

the problem peice of code removing inlined css translate3d. code had in place dealt removing translate re-assigning background images.

for (var = 0; < images.length; i++) {   $el.images.eq(i).css('style', 'background-image: url(' + images[i].src + ')'); } 

in mobile safari fine, in chrome images reloaded when re-assigned background image, hence disappearing act. adjusted code little smarter, , concise, removed translate inlined styles.

$el.images.css('transform', ''); 

turns out when pass empty string value css attribute in jquery remove style out instead of leaving there blank. makes sense, never knew before.

anyway, that's fixed me.


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -