Slick: Disapearing absolute positioned element inside slides

[erthi16]

I have images with caption inside each of my slides. Each caption is positioned absolute above it's image. When I view in Chrome (version 34...) and use the arrows, the captions disapeare! They only reapeare when the carrousel returns to it's original position... When I remove the position absolute config in my CSS, everything is OK by I do need to place captions on top of the images... It is not possible to include the caption inside the images... my clients dont want to manipulate images!
Thanks a milion times!

[kenwheeler]

Absolute positioning is relative to the nearest positioned element. Sounds like they are snapping to slide-track. Put a position: relative on your slides themselves.

[erthi16]

I've verified my CSS and the captions are positionned absolutely inside parents that are positionned relatively... I've also positionnned "relative" all parent containers upto the slides themself! But Chrome still displays wrong! IE, FireFox, Safari... all work OK... Here is my working exemple... http://www2.ulaval.ca/notre-universite/direction-et-gouvernance/new-bureau-du-secretaire-general.html. It's not yet public by close enough!
Thanks a milion for you time!
Great work!

[erthi16]

I've made modifications to affect only Chrome... I've put an alpha on the images and, as expected, my absolute positionned captions are at their place! So the problem lies on the z-index level... but with a z-index at 1000 for the captions and z-index at 1 for the images, the problem persists! Is there code in your script that affect z-index VS Chrome?
Thanks for your time!

[kenwheeler]

Put this on the caption: -webkit-backface-visibility: hidden;
}

[erthi16]

Yes that worked!  So it was related to 3D transform!A million thanks!

[zlove]

I had a similar issue on Mobile Safari with iOS 8.1. The -webkit-backface-visibility: hidden; fix did not work for me. What did work was applying -webkit-transform: translate3d(0,0,0); to the elements inside the slide which we're disappearing.

[rassokhin-s]

@zlove -webkit-transform: translate3d(0,0,0); fixes the issue on mobile Safari. Thank you!

[aosmichenko]

IT"S not working! bondagefetishstore.com bottom most popular slider in safari

[kenwheeler]

@Aosmichenko looks like it's working to me

[aosmichenko]

I am using latest safari, you?

Best regards,
Alex Osmichenko | WordPress/Web developer | skype:alex_osmichenko | mob:+38
[phone]

On Sun, Apr 26, 2015 at 5:53 PM, Ken Wheeler [email protected]
wrote:

@Aosmichenko https://github.com/Aosmichenko looks like it's working to
me

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/206#issuecomment-96402288.

[aosmichenko]

Here is how I see it https://space.zeo.net/g/1vs0g/AVUDJ5FJK5DT5Q575S7TIE77CAQ7OEJ4 , sorry for such adult content..

[simeydotme]

AHAHAHAHHAHAHAHAHAHHAHAAAAA
There's my Christmas list done.

[simeydotme]

on a serious note; the slider and its labels look fine to me, but I do have experience with Safari being a twat about z-indexing and even implements the z-index / 3d-translate poorly/wrongly;

http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d
https://bugs.webkit.org/show_bug.cgi?id=61824

[nguyenj]

@kenwheeler thanks man! -webkit-backface-visibility: hidden; worked like a charm.

[yves-s]

Worked, thanks @kenwheeler

[manmohan-bisht]

@kenwheeler This work like charms..Thanks a lot

[yqz0203]

@zlove great! #

[cheestudio]

@kenwheeler YOU ROCK. How did you find this out even? I never would have thought to do this, but it makes so much sense because I am using transforms on the element. Learn something new everyday in this industry!

[rajeshgrgdesign]

-webkit-backface-visibility: hidden; on absolute div worked for me as well on mobile safari.