youtubeのiframeをremove();しようとするとIEでバグる件 - ブログ｜ベトナムでのオフショア開発とスマートフォンアプリ開発のバイタリフィ
今日はw杯アジア最終予選オーストラリア戦ですね。 19：30キックオフだし定時でサクッとあがって家で観戦したいもんですね。 しかし不発弾処理もあって電車止まったりしていたしスタジアムまで行く人は大変そう。。。 WP事業部すぎやまです。こんばんは。 さて、WEBページ上にyoutube動画を埋め込むのに便利なiframeですが、変なブラウザバグ？に出くわしました。 lightbox風にページ全体を覆った上で動画を再生するという単純なもの （ライブラリやプラグインではなくスクラッチで組んだものですが） ですが、汎用性を持たせるためにサムネイルをクリック後にappend();したり閉じるときにremove();したりしていました。 今まで使ってきて表題のようなバグが出ることはなかったはずなんですが、最近バグが出ているのに気づきました。 IEで再生中に閉じてもiframeをremove();してい
6. script with defer (IE bug) - async/defer属性とDOM構築
実行結果 Hello World! マークアップ <p id="result"> Hello <script src="D.js" defer></script> <script src="E.js" defer></script> <script src="F.js" defer></script> World! </p> 解説 script[defer] doesn’t work in IE<=9 で報告されている「IE9 以下で jquery.js と jquery-ui.js をそれぞれ defer 属性付きで読み込んだ際に起きるバグ」を単純化して再現しました。 発生原因は innerHTML を介して既存 DOM に 直接 HTML を挿入することと推定されており、本例では D.js、E.js、F.js を次のようなコードにして、スクリプトの実行が途中でストールしてしまう様子を再
@keyframesとAndroid
@keyframesとAndroid CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。 transformに複数の値を指定すると動かない @-webkit-keyframes hogeName{ 0% {-webkit-transform:scale(1,2)} 50% {-webkit-transform:scale(2,2) translateY(10px)} 100% {-webkit-transform:scale(1,1) translateY(0)} } サンプル というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。（このサンプルだとscaleの指定が無視される） @-webkit-keyframes hogeName{ 0% {-webkit-transform
border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い - Toro_Unit
最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。 そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。 border-radiusを掛けた要素にoverflow:hiddenを掛けたときの挙動が各ブラウザでちょっと違います。 そんなわけでそのまとめです。 とりあえずデモを用意したのでこれを見ながら解説です。 [css] .box1 { border-radius: 30px; border: 5px solid #999; overflow: hidden; } [/css] これでIE9,firefoxは問題なく内側の要素も丸く切り取られて表示されます。 しかし、chrome等のWebkit系、Operaではう内側の要素がborderに重なって表示されてしまいます。 Operaだと解決方を発見できなかったので、Operaもター
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[CSS3] Androidのmask-imageに関する不具合について
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。 その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、 参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。 でもよく調べてみたらそれだけじゃなかったんです。 検証するにあたって書いたデモはこれです。 以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは３つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://loosely.net/archives/82
IDEA * IDEA
