たぼさんの部屋

いちょぼとのんびり

CSSのアニメーション部分だけ、先に書く:androidブラウザでのリロード時にtickerが表示されないことがある対策

ticker処理のアニメーション部分のCSS

initial.css

/*
 * ticker処理(InquiryAssyで採用)
 * 他のcssよりも先読みさせておきます。
 */
@-webkit-keyframes ticker{
    from {
        -webkit-transform: translate(0);
    }
    to {
       -webkit-transform: translate(-110%);
    }
}
@keyframes ticker {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(-110%);
    }
}

ここだけ先に記述。

残りの部分はあとからでいい。

/**
 *     inquiryAssy
 */
#inquiryAssyContainer {
    display: block;
    width: 100%;
    /*
     * 追記
     */
    margin: 0px;
}
#inquiryAssyContainer  div {
    /**
     *     for ticker
     */
    background: #333;
    overflow: hidden;
    padding: 1px 0;
    

}
#inquiryAssyContainer  a {
    display: block;
    vertical-align: middle;
    text-align: center;
    z-index: 10;
    border-radius: 4px;
    padding: 9px;
    text-decoration: none;
    background: #ffffff;
    color: #000000;
    cursor: default;
}
#inquiryAssyContainer p {
    color: #FFFF00;
    text-align: center;
    margin: 1px;
    /**
     *     ticker
     */
    -webkit-animation-name: ticker;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 50s;
    animation-name: ticker;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    display: inline-block;
    padding: 0 0 0 100%;
    white-space: nowrap;
}