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
Post a Comment