Streaming live at 10am (PST)

Panels reveal interaction not working on iPad


#1

Hi all,

With inspiration from the showcase - http://geospace.webflow.io

I did a 5 panels reveal interaction test for a website for a client. It looks and works fine on desktop however when I test it on iPad, the panel with the lady on the extreme left does not seem to work. The rest of the panels seems to be working fine.*

The page with the problem on iPad: http://king-kong-media.webflow.io/artiste-test-2

Please go to the Artiste Management test 2 page when in the public share link to view the setup.

Please let me know what I am not doing correctly for this to work on iPad. :slightly_smiling_face: Thank you!

* Another slight problem I noticed is that I have to click on the panel twice in order for the interaction to work when first loaded. I was wondering if this is a loading issue of the interaction.


Here is my public share link: https://preview.webflow.com/preview/king-kong-media?preview=fef25c6c835530a9426b72fcd5d023b4


#2

Hi there,

Just had a quick look - first thing I noticed, about your secondary point with the amount of clicks, is that the way you’ve got the Interaction set up is under “1st click - person shrinks” and then “2nd click - person expands”. Hence, you have to click twice to get the panel to open?

I’m only guessing, but could it be that your ‘content-wrapper-michelle-6’ sites on the same z-index level as her ‘artiste-block’ (i.e. both sit on 6). I can’t test it, but does moving it to 7 help?

I notice the rest are either 8 or set to position:auto. Just a thought.

Cheers, Dom
www.domin8designs.com.au


#3

Hi Dom,

Thanks for the quick response.

Yes the interaction setup is suppose to be “1st click - person expands” and “2nd click the person shrinks” but somehow the reverse seems to work when all the panels are at the right place from the start. This is a minor bug, at least it only happen on first load. Will look into this when I have time.

As for the extreme left panel with problem, I have tried your suggestion, fiddling around with the z-index, checking for anomalies in the layouts between the panels, it does not seem to work on iPad. The strange thing is that it works fine on desktop and that is puzzling :tired_face:.

Will keep working on it :sweat:

Cheers!

Ken


#4

Hi Ken,

No worries at all, sorry that it didn’t provide any relief

Good luck sorting it out, I’m sure someone will know what’s going on!

Domin8 Designs Dominic Anastasio / Creative Director
dominic@domin8designs.com.au / 0459 366 090 Domin8 Designs
0459 366 090
www.domin8designs.com.au Twitter Facebook LinkedIn Instagram Youtube Vimeo Pinterest


#5

Hi @kismef, I took a look at the styling on the panels and it seems you are using fixed positioning for those panels, but I am not sure exactly why.

The fixed positions however when rendered on the 1024px viewport of ipad and lower probably are not behaving due to the way the fixed positions are used.

I would change the styling to use relative position on the content wrappers and then use absolute position for content inside those wrapper elements.

It is a little hard to say as you will probably need to redo the interaction completely using different styles on the elements. Right now with the fixed positions the way they are now, it is hard to predict what the layout will look like on mobile.