「safariでinput要素の文字列がオーバーしたとき、スクロールができない」バグについて改善予定日が知りたい

###前提・実現したいこと
「safariでinput要素の文字列がオーバーしたとき、スクロールができない」バグについて改善予定日が知りたいのですが、どのように調べてよいのかわかりません。
バグの対処法については、過去に投稿してありましたこの方→（https://teratail.com/questions/40038）のベストアンサーで知ることができましたが、①改善する予定日や、②対処できるjQueryやJavascript等、①②に関する詳しい事などをご存知の方がいらっしゃいましたらご教授ください。
今回のようなレアなケースの情報はググっても日本語のページではめぼしい情報を見つけらず、現在私は英語を少し勉強しておりますが、海外の方が英語で書かれている情報を正確に翻訳できず困っています。（英語で書いてあるWeb情報の方が、進んでいるとどこかのHPで読みました。）
改善の進捗情報などの情報がここに書いてある。もしくは、最新の対処策はここ。等の英語サイトでもかまいせんので、情報がわかる方がいらっしゃいましたら教えて下さい。よろしくお願いします。

###発生している問題
現在、スマホ対応のページを作成しているのですが、iPhone 5Cでinput要素の文字列がオーバーしたとき（iphoneを縦に持って、住所入力欄で住所がはみ出る）、スクロールが動作せず、オーバーした部分の文字列の内容が確認できないことがわかったのですが、これがバグであった。

###該当のソースコード
全部のソースコードは長くなるので、該当部分に関連しないところは削除してあります。
以下が該当ソースコード（HTMLとCSS)です。
郵便番号に〒602-8303を入力すると住所がはみ出ます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
7<title>配送設定</title>
8<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
9<link href="style.css" rel="stylesheet">
10</head>
11<body>
12<div id="shop_form_deliver">
13	<div id="shop_form_deliver_new">
14	<hr>
15  <h3>２．配送設定</h3>
16  <p>下記フォームにお届先情報を入力後、ＯＫボタンを押してください。</p>
17  <h4>お届け先</h4>
18  <hr>
19  <form action="#" method="post" class="h-adr">
20
21	<div id="deliverBox">
22				<dl class="clearfix">
23						<dt>郵便番号</dt>
24						<dd id=postal>
25							<span class="p-country-name" style="display:none;">Japan</span>
26							〒<input name="deliver_postal1" id="deliver_postal1" type="text" class="p-postal-code" size="8" maxlength="3" placeholder="例）123">
27							―<input name="deliver_postal2" id="deliver_postal2" type="text" class="p-postal-code" size="10" maxlength="4" placeholder="例）4567">
28								<p class="postal_caution">※郵便番号を入力すると、自動で住所が反映されます。</p>
29						</dd>
30				</dl>
31
32				<dl class="clearfix">
33						<dt>住所</dt>
34						<dd>
35							(都道府県＆市区町村＆町域)<br><div id="jscroll"><input name="deliver_address1" id="deliver_address1" type="text" class="p-region p-locality p-street-address" placeholder="例）東京都港区芝公園"></div>
36							(以降の住所)<br><div id="jscroll"><input name="deliver_address2" id="deliver_address2" type="text" class="p-extended-address" placeholder="例）1-1-1 青空マンション101号"></div>
37						</dd>
38				</dl>
39	</div> <!-- deliverBox end -->
40
41	<div class="transmission">
42			<input type="button" onclick="history.back()" value="戻る">
43			<input class="btn_submit" id="btn_submit" type="submit" value="ＯＫ（支払い設定へ）">
44	</div>
45
46</form>
47</div> <!--shop_form_deliver_new end-->
48</div> <!--shop_form_deliver end-->
49</body>
50</html>

style.cssの中身

CSS
1#shop_form_deliver_new dl dd input[type="text"]{
2	max-width: 100%;
3	font-size: 18px;
4	height:30px;
5  padding: 3px 0 3px 10px;
6  margin:0;
7}
8
9div #jscroll{
10	width: 210px;
11	height:30px;
12	font-size: 18px;
13	overflow:scroll;
14	-webkit-overflow-scrolling: touch;
15}

###試したこと
①cssの変更
input要素の前にdivを設定して、そのdivのcssに以下の内容を記入してみるが、input要素をタップして、スクロールしてみようとしますが、オーバーした部分の文字列の内容が確認できずでした。

CSS
1div #jscroll{
2	width: 210px;
3	height:30px;
4	font-size: 18px;
5	overflow:scroll;/*これ*/
6	-webkit-overflow-scrolling: touch;/*これ*/
7}

②以下サイトのjQueryプラグインを試してみるが、<p>,<li>要素が羅列してある時のみ有効でした。<input>要素の1つの要素に対してスクロールバーを表示させることはできませんでした。

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_scroll

などです。。

###実行環境
端末：iPhone 5C
ブラウザ：safari 8.0
OS：iOS 8.0.2

kei344

2016/08/16 10:44

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

sakura123

2016/08/16 10:58

該当ソースコードを追記しました。見て頂きありがとうございました。

kei344

2016/08/16 17:59

CSSもついでにコードブロックに入れてあげてください。また、URLにはリンクを張ることができますので、編集よろしくお願いします。あと、「バグについて改善予定日が知りたい」が質問でしょうか。それとも解決方法（過去の質問以外）を求めておられるのでしょうか。

kei344

2016/08/17 00:43

いえ、「試したこと」の中のCSSの記述について、と言うことなのですが･･･。

sakura123

2016/08/17 00:45

遅くなりましてすみません。CSSを追記し、HTMLのCSS部分変更しました。見て頂きありがとうございます。また、「バグについて改善予定日が知りたい」のと、解決方法（過去の質問以外）両方とも知れると助かります。質問内容がわかりづらくすみません。よろしくお願い致します。

sakura123

2016/08/17 01:02

すみません。「試したこと」のCSSの記述については、 div #jscroll{ width: 210px; height:30px; font-size: 18px; overflow:scroll;/*これ*/ -webkit-overflow-scrolling: touch;/*これ*/ } ↑これをCSSブロックに書いてということだったのでしょうか？はやとちりしました。すみません。直した方がよろしいですか？

kei344

2016/08/17 06:50

CSSで質問文に書かれているものを、コードブロック化してもらえればありがたいです。

sakura123

2016/08/17 07:51

遅くなりすみません。やっとご指摘頂いている事に気づいた気がします。コードブロック化とリンクの張り方がわかっていませんでした。以下のとおり変更しました。ご指摘ありがとうございました。 ①「試したこと」の中のCSSの記述について、コードブロックに入れました。 ②「前提・実現したいこと」の中のURLに、リンクを張りました。　そして、「①改善する予定日や、②対処できるjQueryやJavascript等、①②に関する詳しい事などをご存知の方がいらっしゃいましたらご教授ください。」に変えました。 ③「該当のソースコード」の中身を少し変更しました。せっかくなので、記載することにしました。以上となります。勉強になりました。ご指摘ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

あまり前向きな回答ではありませんが、Safari はOSとともにしかアップデートされないため、そのタイミングに改善されることもありますが、されないかもしれません。よほどのこと以外は予告されないのではないかなぁ。一応デベロッパープレビュー版が取得できるはずなので、それで確認してみて、確認するくらいだと思います。

【お使いの Mac 向けの最新バージョンの Safari を入手する - Apple サポート】
https://support.apple.com/ja-jp/HT204416

【OS X - Wikipedia】
https://ja.wikipedia.org/wiki/OS_X

【OS X El Capitan - Wikipedia】
https://ja.wikipedia.org/wiki/OS_X_El_Capitan

デベロッパーからのバグリポートが受け付けられているので、そこで状況について触れられている可能性もあるかも。

【Login to Apple Bug Reporter】
https://idmsa.apple.com/IDMSWebAuth/login.html?appIdKey=77e2a60d4bdfa6b7311c854a56505800be3c24e3a27a670098ff61b69fc5214b&sslEnabled=true&rv=3

投稿2016/08/17 08:13

kei344

総合スコア69400

sakura123

2016/08/19 06:57

回答ありがとうございます！色々な情報ありがとうございます。私の使っているPCは、Windows 10なので、MacのOS X関連の情報は為になりました。ありがとうございます。「Login to Apple Bug Reporter」は、Apple IDを作成し、Bug Reporterの登録をしてみましたが、中身を見ることができず、また、英語での質問に躊躇し、断念しました。調べてみると、開発者向けにiOS 10のベータ版・プレビュー版の配信が開始されていると書いてありました。しかし、年額11,800円を支払ってApple Developer Programに登録することでインストールが可能です。ということで断念しました。。余談ですが、実行環境で使っている端末iphone5ｃを、最新のIOS 9.3.4にアップデートしてみたのですが、やはり問題の現象を確認できました。今年秋にIOS 10がリリースされるようなので、それまで待ってみようかと思いました。色々と本当にありがとうございました。

行動規範の内容に同意します