metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.13k stars 315 forks source link

iPhone 8 can't get static click, drag and save work fine #530

Closed jonycp closed 5 years ago

jonycp commented 5 years ago

Thank you very much for sharing this great library!

Our use case has a modified version of your html and css, but it works fine on desktops and on Note 9. However, it does not fully work on iPhone 8. I have not tested on other devices. On iPhone, we aren't getting the static click to navigate to the link.

Here's is the page I have set up https://www.ycp.edu/tmp/myycp/index.php on our site. To be useful for our visitors, it needs to work within our web page templates. We are migrating from a SSO portal which provides linked icons for users to sign in to services; once signed in, all the other icons go directly to the service the represent.This example is not restricted by a site login.

The problem we face with users is their SSOs are scattered over the set (it is larger than this example), and so I wanted a means of allowing them to reposition their favorite sign ins to the top row. Perfect for draggabilly! Then they would want to save those postions, so packery to the rescue!

The difference I have is that I removed the background url image and inserted an image surrounded by an a tag inside the divs. This works as mentioned on desktops and on Note 9 which is a large format Android phone. On iPhone 8, in Safari, the divs drag and save as normal, but I can't get the click / url. Would this be possible? On iPhone 8, in Chrome, the divs drag and save as normal, and I can get the url by tap/hold for the action menu. Same idea would like static click.

Thank you! Code appears below: (had trouble trying to set up a fork, sorry)

(our classes for font and spacing mostly)

```

Packery - save & restore drag position