CODEWITHSUNDEEP
iphonecssgoogle-chromecss-transforms
jasonmerino
jasonmerino

Reputation: 3240

Images disappear during translate3d on Chrome for iPhone and iPad

I have a coverflow type image gallery that I have created for mobile picture viewing. The first iteration lives here: http://codepen.io/jasonmerino/pen/Fsloq.

I've wired up the touch events and all seems to be going well for mobile Safari on iPhone and iPad, but when I go to view it on Chrome for iPhone or iPad the images disappear during part of the CSS translate3d which moves the images to the sides.

I have added -webkit-backface-visibility: hidden; to all of the markup that comprises the swiper, which does not fix this disappearing act my images are doing.

What am I missing here? Any help would be appreciated. Thanks!

Upvotes: 2

Views: 1385

Answers (1)

jasonmerino
jasonmerino

Reputation: 3240

The problem was with the peice of code where I was removing inlined CSS translate3d. The code that I had in place dealt with removing the translate by just re-assigning the background images.

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

In mobile Safari this was fine, but in Chrome the images reloaded when I re-assigned the background image, hence the disappearing act. So I adjusted my code to be a little smarter, and concise, so that I only removed the translate from the inlined styles.

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

Turns out that when you pass an empty string as the value to a CSS attribute in jQuery they just remove the style out for you instead of leaving it there but blank. Makes sense, but I never knew that before.

Anyway, that's what fixed it for me.

Upvotes: 5

Related Questions