このページについて

概要About

このページは、iPhone, iPadといったiOSで、一定条件のhoverエフェクトを付けるとタップを2回要するようになるバグを検証するためのページです。

例えば、下記のボタン(左から右に色が満ちていく)は遷移に2回タップを要します。

概要へ

下記のようなボタン(上から下に色が満ちていく)でも同様です。

概要へ

aタグそのものではなく、疑似要素に処理させている場合でも同様(これが上の場合に該当)。

なお、コードは下記のような感じです。

html


<p class="btnWrapper">
    <a href="./about.html" class="btn btn_rightArrow">概要へ</a>
</p>

css(scss)


$color: #333;
$bg-color: #fff;

$main-color: #6BBED5; //blue
$main-color2: #1E98B9; //dark blue

$accent-color: #EDA184; //bague

$link-color: #DF81A2; //pink
$link-v-color: darken($link-color, 13%);
$link-ha-color: lighten($link-color, 13%);
.main {
    .btn {
        margin: {
            top: 2rem;
            bottom: 4rem;
        }
        padding: 1rem 1.5rem;
        color: $link-color;
        border: 1px solid $link-color;
        border-radius: 0;
        text-decoration: none;
        position: relative;
        display: inline-block;
        z-index: 10;
        &:hover, &:active, &:focus {
            color: $bg-color;
            border: 1px solid $link-ha-color;
            text-decoration: none;
            &.btn_rightArrow {
                &:before {
                    width: 100%;
                }
                &:after {
                    color: $bg-color;
                }
            }
        }
        &.btn_rightArrow {
            &:before {
                content: "";
                position: absolute;
                display: block;
                background-color: $link-ha-color;
                width: 0;
                top: 0;
                left: 0;
                bottom: 0;
                @include transitionSet();
                z-index: -1;
            }
            &:after {
                font-family: FontAwesome;
                content: "\f105";
                color: $link-color;
                padding-left: 3rem;
            }
        }
    }
}