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; }