読者です 読者をやめる 読者になる 読者になる

あずきみるくのあずきはニガテ - for Engineer

ひよっこプログラマがやってみたことやハマっちゃったことなど、備忘録的な感じで書いていきます。

iOSでsubmitボタンが消えた!!buttons.cssのせい?!

うそのような、ほんとの話。

ボタンが消えたんです。iOS上でのみ。

PCでもAndroidでも、問題なく見えているのに、
iPhoneとかiPadではボタンが忽然と消えたんです。

でも、見えないだけでボタンは存在してて。
「この辺にボタンアッタヨネ~」ってところを
タップすると反応する、という何とも不思議な現象。

これをなんとか解決したいと思います。

■状況

手っ取り早く言うと、cakePHPにbuttons.cssを使ってボタンを作ってます。

現象としては、

  <iOS8では・・・>
     PC、iPhoneともに、ボタンが見えていた。

  <iOS9になると・・・>
     ボタン消えた!!

いろんなところをググったけど、おなじ現象の人は見当たらず。

<環境>
 ・php 5.4
 ・cakePHP 2.5.8
 ・buttons.css(1.0?)
    ※「2.0 comming soon!」ってなってたから、たぶん1.x?。
 ・iOS 9.2

■buttons.cssとは。。。

ボタンを作るためのcssライブラリです。
詳しくはここでー。
unicorn-ui.com


■で。

使ってるソースは一緒。

echo $this->Form->submit('送信', array(
            'name'=>'smt', 
            'div'=>false, 'label'=>false,
            'class'=>'button button-rounded button-flat-caution'));


実行すると、こんな感じで出力されるはずだった。

f:id:azuki-milk-lush:20160307141051p:plain

iOS8までは、こんな感じでちゃんと出てたのに。

iOSアップデートしたとたん、消えたんですわ。

不思議だ・・・


■解決法

いろいろやってみたけど、一番簡単な解決法は

echo $this->Form->button('送信', array(
            'name'=>'smt', 'type'=>'submit', 
            'div'=>false, 'label'=>false,
            'class'=>'button button-rounded button-flat-caution'));

にすること。やったことは以下の2ステップです。


① FormHelper:submit → FormHelper:button

② 'type'=>'submit'の追加



■検証してみる。

出力されるHTMLがどう変わるか。

FormHelper:submit

<input name="smt" class="button button-rounded button-flat-caution" type="submit" value="送信">

FormHelper:button

<button name="smt" type="submit" class="button button-rounded button-flat-caution">送信</button>


・・・ふむ。タグが変わっただけで、動作も変わらない。
やってみれば一発なんだけど、それまでは
・Buttons.cssの中身を変更するか
・Buttons.cssのアップデートを待つか
iOSのアップデートを待つか
なんて考えてた。

iOSのバグなんじゃない?!
とか思ってたけど、、、実際のところは謎のまま。

とりあえず、事象は解消されたから、これでいいかな?

他の解決方法をお持ちの方、ぜひコメントお願いします!!