[楽天][スマホ]お買物カゴへページ内遷移するボタンが表示されない。

Question

###前提・実現したいこと
楽天ショップのスマートホン商品ページにて
ヘッダーにフィックスさせた検索窓を実装しようと試行錯誤しています。
iosの既知の問題である
「fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう」
というところをまずは解消しました。

結果発生した問題となります。

###発生している問題
楽天がデフォルトで実装している、
お買物カゴへページ内遷移するボタンが表示されません。

当店の商品ページ
現状はこのような形で、ヘッダーにフィックスさせた状態で、
iosのページトップへ戻ってしまう問題も回避できておりますが、
その結果スクロール後に表示される
「お買物カゴ」ボタンが表示されなくなってしまいました。

他店舗さまの商品ページ
他店舗様では問題なく、スクロール後に「お買物カゴへ」ボタンが
右下に表示されるかと思います。

恐らくはiosのバグを解消するために設定したこちらのcssが原因では、
と思っているのですが、いかんせん解決策がわかりません。

html, body {
	height:100%;
}

以下のページ内で指定しているCSSを記載します。

###ソースコード

/*検索ボックスの親*/
#rstTopSearch {
	position:fixed;
	top:0;
	left:0;
	width:100% !important;
	padding:0 !important;
	z-index:9999;
}

/*
全体の親要素を絶対位置表示、
高さをディスプレイいっぱいに広げ
その中でコンテンツをスクロールさせています。
*/
article.current {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	height:100%;
}

/*
上記CSSを生かすために
HTMLとbodyにも高さを指定しています。
*/
html, body {
	height:100%;
}

###最後に
ヘッダーに検索窓をフィックスさせ、iosのバグを回避した状態までは来ることが出来ました。
最後にこのお買物カゴへの遷移ボタンが通常通り表示、機能してくれれば、
目指す要件をすべて実装できる、というような段階です。

どなたか回避策や案などをお持ちの方。
お知恵を貸していただければ幸いです。

宜しくお願いします。

━━━━━━ここから追記━━━━━━
2016.03.16.18:10
現在試行錯誤しながら進めているためページ内の状況が元のものから変更されております。
また時間をおいて元に戻しますのでその際にお力添えいただければ幸いです。

━━━━━━ここから追記━━━━━━
2016.03.17.13:34
質問当初のページ内容に戻しました。
引き続きお力添えいただければ幸いです。
宜しくお願いします。

Comments

[ogaaaan]

Macつかってるなら直接USBケーブルでiPhoneなどと接続してインスペクタ開くと実際の画面を見ながらデバグできます。そこまでは準備しておいたほうが良いかもしれないすね。
http://www.islog.jp/entry/ios-safari-web-inspecter/

[zeele001]

度々ありがとうございます。
マックを持っていないのですが、今後の参考にさせていただきます。

Answer 1

スマホではスクロールに対して大きな抵抗はないだろう、と自分に言い聞かせ。
取り急ぎ現状のまま置いておくことにいたしました。

どうしてもという時の回避策として、jqueryによりお買物カゴへ遷移するボタンを生成することで回避できそうです。
お付き合いいただきありがとうございました。

Answer 2

スマホ版で右下に「上へ」と「かごへ」のボタンが表示されないということでしょうか。
design_sp.cssの118行目に

#floatingButtons {
    display: none !important;
}

が設定されているのが原因かと思います。
!importantの部分を削除して確認してみてください。

Comments

[zeele001]

ご回答ありがとうございます。
こちら楽天側が用意したjsにより、
スクロールを検知してディスプレイブロックになるようです。

こちらからディスプレイブロックにすることで表示はされるものの…
ページ内遷移が機能しないようになってしまっております。

恐らく下記CSSでiosのバグを回避した影響かと思われますが、

/*
全体の親要素を絶対位置表示、
高さをディスプレイいっぱいに広げ
その中でコンテンツをスクロールさせています。
*/
article.current {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
height:100%;
}

/*
上記CSSを生かすために
HTMLとbodyにも高さを指定しています。
*/
html, body {
height:100%;
}

あちらを立てればこちらが立たず状態でございます。

ご回答ありがとうございました。

[na533]

ボタンは楽天側のスクリプトで制御されているようですが、
ソースを読み解く力は私にはありませんでした。
詳しい方の回答に期待したいと思います。

力技ではありますが、
ページ内スクロールのみであれば
該当箇所にaタグを追加しリンクが機能するか試してみて
別途jqueryなどを使って似た実装してしまうのが早いかもしれません。