
iOS and VoiceOver and an IMG with an SVG as its source The purpose of this page is to demonstrate an iOS / VoiceOver bug where VoiceOver will not find an image that is coded as an IMG with an SVG as its source, unless the IMG tag has role=img. Even then, explore by touch does not work. Test cases 1 and 2 demonstrate the typical IMG tag with an PNG - one is an image and the other is an image link.
サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる 描画領域とPaint Flashing その1でPaint flashingを見たときにはアイコンの周りに枠がついていたのに、その2で描画領域を見たら文書全体で起こっていたたのをふしぎに思ったひとがいるかもしれない。 これはPaint flashingの説明 Hightlights areas of the page that need to be repainted というのをよく読むといいかも。緑色になったところは「再描画が必要になったところ」、paint invalidationを指している。なので変化していない箇所は緑色にならなかったわけだ。 Chrome
Starting today, there’s a new, convenient way to see what features and improvements are coming to Safari and other applications that use WebKit. Safari Technology Preview is a version of Safari for OS X, distributed by Apple, that includes a cutting-edge, in-development version of the WebKit browser engine. It’s a great way to test upcoming WebKit features and give feedback to the people building
Ten years ago today we introduced the first version of Web Inspector to the world. That time was the wild west of web development, when your best debugging aid was alert(). While the earliest version of Web Inspector was limited (it didn’t even have a console), it did expose two things that developers didn’t have much insight into — the DOM tree and matching style rules. Web Inspector being open s
Safari 9.1The following new features have been added in Safari 9.1. Picture Element SupportYou can use the HTML picture element to provide Safari with multiple versions of the image for different browser configurations and viewport sizes. Safari evaluates the picture's image resources in the order in which they are provided. Safari displays the first image resource with media attributes that confo
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏(@firt)がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者/開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」(this is the buggiest Safari version since 1.0)だそうです… UIが大幅に変更、フルスクリーン(に近いサイズ)がデフォルトに Webブラウジングをしている
Problems, changes and new APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 12 years ago (18 Sep 2013) About 18 min reading time #ios #html5 #webview #homescreen webapps Apple has rolled out iOS 7 with iPhone 5S and iPhone 5C . As expected, Apple has published just 10% of the necessary information for web developers, and I can say without fear of mistake that this is the buggies
2013-07-11 WebKit Changeset から推察した iOS 7 beta 3 MobileSafari に適用されているかもしれない変更点まとめ 全て個人的な推測にもとづいています。 サマリー mouseenter, mouseleave イベントのサポート Math.imul のサポート canvas#supportsContext のサポート WebAudio にユーザイベントを経由せず noteOn した場合に音が鳴らないように制限を追加(in iOS) AudioBufferSourceNode の "onended" イベントのサポート canvar#toDataURL("image/jpeg", quality) のサポート(in BlackBerry または 全て?) "audio/speex" MimeTypeのサポート -webkit-backgroun
Safariについて言いたかったことを言えてなかったので、もう一本だけ。 ひとことで言うと、「バグ見つけたら報告して、5月までに直してもらおう」と。 5月を逃すとせつない なんでSafariに気をかけてるかというと、モバイル端末での影響力(シェア)が大きいから。WWDCではモバイルWebでのマーケットシェアのうちiPhoneが60%、タブレットWebではiPadが82%と言っていた。ソースわかんないけど、デスクトップみたく低くないことは確実かと思われる。 影響力があるけど、リリースサイクルが長い。ここがとても気にかかる。 Safari 7予想エントリで、Safariの元になるWebKitが5月にブランチされていることを書いた。これはMac portの話なのでOS XのSafariの予想だったんだけど、iOSのSafariもこれまでのバージョンのUA文字列から判断するに、WebKitのバージ
追記 (2013-08-13): WWDCでの発表にて、いくつか予想が外れたのが分かったので、短い答え合わせのエントリを書いた。あわせてSafariに懸念していることも書いたので、それもどうぞ。 Safari 7予想:答え合わせなど Safariでせつなくならないために何かしたい 以下は元記事。 WWDCが近いので新しいSafariの予想をしようかと。 来週まで待って確定的な情報を書いてもよかったけど、まあいいや。 たぶん7月に出る 新しいバージョンが「Safari 7」になるのかわかんないから、Apple風に「新しいSafari」と書くね。 ここ2回のメジャーバージョン(5.1, 6.0)は、7月下旬にリリースされている。なので今回も、WWDCでお披露目+Developer Previewのリリース、7月の同時期に正式版リリースされると予想。 ここ1, 2ヶ月のWebKitでのApple
えっ、クジラが動くってどういうこと!? という方は、まずコチラをご覧ください。 キャー、カワイイ! ナニコレ! チョー、カワイイ! CSSで作られた動くクジラちゃんなのでございます。こんなクジラが出てきたら、ツイッターがトラブっていても、思わずニンマリしてしまいそうですね。 で、そんなことをSafari 5で実現してしまったのが「Release The Fail Whale」という訳です。トラブル時に表示されるクジラを動かしてしまいます! インストールはしてみたものの、あいにくとツイッターはただいま快調。まだ、動くクジラにはお目にかかっておりません。こんなことを願ってはいけませんが、早くツイッターが不調にならないかな‥‥とか、不吉なことを考えてしまいました。 万が一、ツイッターがトラブっても、このクジラでニコニコできそうです。 早く見たくて仕方ない方はコチラのテストページからどうぞ。 #「
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
この一週間、Webページのブラウザキャッシュについて少し調べてた。 Webコンテンツを出来るだけブラウザキャッシュさせて転送量を削減しようと目論んでいて、PHPアプリケーション側でIf-Modified-SinceヘッダとDB最終更新時間を照らし合わせて、更新がなければ304を返す、という一般的なブラウザキャッシュ利用実装を行ったんだけど、テストしてみたらSafariが全然キャッシュを使ってくれない。と言うわけでApacheのログを取って色々調べた結果、表題のことが分かった。 Safariのリロードは、いわゆる強制リロード相当である 一応簡単に説明すると、IEなどの一般的なブラウザはページの読み込みシチュエーションによって、ブラウザ内のキャッシュを使うかどうかのポリシーを変化させている。IEやFxでは、 通常ロード ブックマークやロケーションバーからページにアクセスした場合 リンクや「戻る
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ! そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは? 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか? データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
SafariにはStylish相当のものがないので自分で書く。 リアルタイムに編集できるようにするとかなり動作が重くなるので、少し工夫してる。 javascript:(function () { var css_edit = document.getElementsByClassName('_css_edit'); if (css_edit.item(0)) { Array.prototype.slice.call(css_edit).forEach(function (elem) { elem.parentNode.removeChild(elem); }); return; } var t = document.createElement('textarea'); var s = document.createElement('style'); s.type = 'text/css';
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く