iOS Safari 双击按钮问题

Question

I'm creating a mobile app with Meteor and I'm having problems with buttons in the Safari Webview. It seems like at totally random times and buttons, I'm forced to tap on something twice in order for the click to register. I have research a lot about the problems and all the answers have not worked for me.

Almost all the buttons/links in my app use javascript for their function. I don't use any :hover in my CSS.

I can't find any pattern or reason for when it happens. It seems totally random. It makes my app feel unresponsive and slow because you have to tap half of the stuff twice for it to register. I doesn't seem to happen when I'm using the app in a desktop browser.

Has anyone ran into this problem before or know of solutions?

Answer 1

At the time of tapping, are your buttons in the bottom 44px of the viewport? It could be caused by Safari's hostile menu bar .

If so the only solution I can think of is to move those links outside of that area. If anyone has a better solution, I'd be interested myself as well. (None of the solutions I've found have worked so far, including styles on the content;

.parent {
  overflow-y: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

or adding some padding to the bottom positioned element;

.bottom-positioned-element {
   padding-bottom: env(safe-area-inset-bottom);
}

Answer 2

I ran into this problem with a link on my page so I applied this SCSS / CSS solution. Is it possible with your setup that a hover is being added elsewhere to some of the links..? even though there is no style change..?

https://gist.github.com/PocketNinjaDesign/689e16e412a88dfd36dd08b26bebcacf

a.close {
  background: #fc0;

  @media (hover: hover) {
    &:hover {
      background: #f00;
    }
  }
}

as specified in the mozzilla docs ;-) https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover