Requires Double Tab on images to go the link on iPhones & iPads

[tammu]

The images on the homepage seems to require double tap in order to go its link. I checked the css and it seems the below code is causing the issue with iOS.

.sfnt-promo:hover a:after {
    background: rgba(0,0,0,0.45);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #38c574;
    line-height: 20;
    font-weight: bold;
}
.sfnt-promo:hover a:before {
    content: "";
    position: absolute;
    bottom: 20%;
    z-index: 2;
    margin: auto;
    left:0;
    right:0;
}

The hover after and before pseudo elements are causing the issue. I can remove it but wondering if there is an alternative solution

Thanks

[Matt Zimmermann]

This is due to the way iOS handles a hover event on a touch device. You should be able to modify the CSS to the following and correct the issue.

.no-touch .sfnt-promo:hover a:after {
    background: rgba(0,0,0,0.45);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #38c574;
    line-height: 20;
    font-weight: bold;
}
.no-touch .sfnt-promo:hover a:before {
    content: "";
    position: absolute;
    bottom: 20%;
    z-index: 2;
    margin: auto;
    left:0;
    right:0;
}