Android 4.3以下で閲覧しているとSVGの画像が正しく表示されていないことがある。 Android 2.3以下であればSVG非対応なので表示されないのは当然だが、4.3以下で正しく表示されないことがあるのはなぜか？ それはAndroid 4.3以下の標準ブラウザはSVGタグにwidthとheightの指定がないと正しく表示できないバグがあるからだ。 以下の2つはそれぞれSVGタグにwidthとheightの指定をしたものと指定なしのものだ。(オレンジの方は指定なし) Android 4.0-4.3で見るとオレンジの方は正円になっていない(正しく表示されていない)はずだ。 それぞれのSVGファイル内のコードはこのようになっている。見ての通りオレンジ色のSVGのほうにはwidthとheightの指定がない。 青のSVGのコード <svg xmlns="http://www.w3.org
IntersectionObserver’s coming into viewPublished on Wednesday, April 20, 2016 • Updated on Tuesday, October 3, 2017 Let’s say you want to track when an element in your DOM enters the visible viewport. You might want to do this so you can lazy-load images just in time or because you need to know if the user is actually looking at a certain ad banner. You can do that by hooking up the scroll event o
* = Safari does not support SVG Stacks ** = 15 sprite requests with fragment identifier + 1 request for sprite without fragment identifier Test method The tests were run with a simple Python server based on the script below. The amount of requests are counted according to the log in the command line. The files tested are exactly the same as the linked pages in the comparison table. The Cold cache
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
平素は、はてなブログをご利用いただきありがとうございます。 はてなブログでは2016年4月1日より、ブログを編集・管理する際に使用を推奨するWebブラウザを、下記の表のように変更いたします。 はてなブログを編集・管理する際に使用を推奨するWebブラウザ（2016年4月1日以降） Webブラウザ プラットフォーム 備考 Chrome Windows（7以降）、OS X（Mac）、Android OS Windows Vistaでは非推奨 Firefox Windows、OS X（Mac）、Android OS Opera Windows、OS X（Mac） Safari OS X（Mac）、iOS Windows版は非推奨 Internet Explorer 11 Windows（7以降） Android標準ブラウザ Android OS（4.1まで） ※Webブラウザはすべて、最新の正式バ
[SVGファイルの作り方はこちらを参照] SVG 形式で書き出す方法 （Illustrator CC） – Adobe Nexus5(Android4.4 Chrome) 問題無し ARROWS Z ISW13F(Android4.1 Chrome) 上下にマージンはあけていないのに、スキマが出来てしまう。比率も合っていません。 AQUOS PAD SHT21(Android4.1 Chrome) アスペクト比率がおかしい 解消方法 SVGファイルをテキストエディタ等で開き、名前空間(＜svg＞＜/svg＞)の宣言のところに 「preserveAspectRatio=”none”」 を追記します。 追記前 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.
Qiita, Qiita Teamをご利用いただきありがとうございます。 2016年1月13日より、Microsoft社は各バージョンのWindows OSにおいてサポートされる最新のInternet Explorer (以後「IE」)だけに技術サポートを提供するようになりました。これによって、Windows Vista, Windows Server 2008を除きIE9の技術サポートが終了することになります。 参考: Internet Explorerサポートポリシー変更の重要なお知らせ – Microsoft またQiita, Qiita TeamのアクセスユーザのOS環境を調査した結果、当該環境からのアクセスは全体の1%未満であることが判明しました。 これを受けて Qiita, Qiita TeamでのIE9のサポートを3月31日を持って終了する ことにしました。それ以降のサポート
HTTP Compression Brotli is an open source data compression library formally specified by IETF draft. It can be used to compress HTTPS responses sent to a browser, in place of gzip or deflate. Support for Brotli content encoding has recently landed and is now testable in Firefox Developer Edition (Firefox 44). In this post, we’ll show you an example of how to set up a simple HTTPS server that takes
はじめに JavaScriptのデバッグをするときに、console.logなどを使いますが、 調べてみるとなんだかたくさんあったので触ってみました。 普段個人的にはChromeを使ってるけど、 Chromeと同じノリで他のブラウザで使った時に動かないのは嫌だし 仕事とかではIEなども使ったりするので、Chrome以外で動くのかも調べてみました。 使用ブラウザバージョンは以下。 Chrome（47.0.2526.111 (64-bit)） Firefox（43.0.4） IE8_Win7（8.0.7601.17514） IE11_Win7 and Win 10（11.0.10240.16384と11.0.9600.17801） Edge_Win10（20.10240.16384.0） Safari（9.0.3） メソッド一覧・対応状況 コンソールにエラーが出たのが「×」。 「△」は更新プロ
![[*JavaScript*] consoleメソッドの使用可否をブラウザごとに調べる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c44d9b64474bf69568d90ffce43c505994d765d6/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDg5MTIlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2OTE1MjQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MTE5MzRkZDI2YjcxNjJmYzVkMzQwYTYyMWZmMzQ5ZjY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc57db135e15888567961a96620540bea%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJTJBSmF2YVNjcmlwdCUyQSU1RCUyMGNvbnNvbGUlRTMlODMlQTElRTMlODIlQkQlRTMlODMlODMlRTMlODMlODklRTMlODElQUUlRTQlQkQlQkYlRTclOTQlQTglRTUlOEYlQUYlRTUlOTAlQTYlRTMlODIlOTIlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElOTQlRTMlODElQTglRTMlODElQUIlRTglQUElQkYlRTMlODElQjklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0yMmQ3ODA2YTBiZWU2ZjAwYmU5N2VjNmViMzdmMTg2Mw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjaWdhbGVjaWdhbGVzJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MGQwMTI3YzkzZDQ4MWZlZmFiMjhjYTU2NTY2ZWVkYjQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Da78807f781c34722e47c9a1d7dee86be)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style id="red">#red:target ~ * {fill: red;}</style> <style id="blue">#blue:target ~ * {fill: blue;}</style> <style id="green">#green:target ~ * {fill: green;}</style> <circle cx="100" cy="100" r="100"></circle> </svg> <h2>imgタグ</h2> <p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS"> デフォルト</p> <p><img src="http://jsrun.it/assets/a/L/3
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
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
この記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。 面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。 私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話...... もう昔過ぎてあまり明確には覚えてないんですけども、私が CSS というか、HTML をはじめとした、今でいう Web サイト制作関連の技術に興味を持ちだしたのは 1996年ごろ。 アトランタオリンピックが開催された年で、Yahoo! Japan がサービス開始した年らしい。テレビやラジオをつければ小室哲哉氏プロデュースの曲ばっかり流れていた記憶が。 当時、専門学校でメカトロ
【HTML5 Experts.jp】2015年9月のブラウザ関連ニュース 矢倉 眞隆（myakura） Chrome 45でES2015のArrow Functionsに対応 9月1日にChrome 45がリリースされました。 Chrome 45ではJavaScriptエンジンのV8が更新され、ECMAScript 2015のサポートが向上しました。新たにサポートされた機能には、関数の読みやすさ・書きやすさが上がるArrow Functionsがあります。同月リリースされたNode 4.0でもArrow Functionsが使えますし、これから見る機会が増えてくるかなと思います。 パフォーマンス改善点として、スクロール中のカーソル位置を更新しなくなったというものがありました。スクロール中に:hoverのスタイルやマウスイベントが反応すると、不必要な処理や描画が増えてしまうため、パフォーマン
ForceClick.js は force click によるリンクの先読み機能を無効化するライブラリです。 iPhone 6s Safari で <a href="..."> をクリックすると、3通りのアクションが発生することはご存知でしょうか? 軽くタッチすると、リンクを現在のタブで開く (open link) 長めにタッチすると、コンテキストメニューが開く (longpress, open contextmenu) 強く押すとモーダルダイアログが開き、リンク先のページをプレビュー (force click on link navigation) 3番目の機能は iPhone 6s で新たに追加された機能です 普段使いには便利な機能なのですが、問題を誘発するケースがいくつか見つかっています。 WebGame における問題 「レイドボスと戦う!」と書かれたボタン状のリンクがあり、リンク先
svgの印刷結果をクロスブラウザ化する
svgはxml記述で自由にグラフィックを描くことが出来る上，今日ほとんどのwebブラウザで表示・印刷することが可能であるなど，使い勝手が良いのが魅力です． そこで，レポート用紙などの用紙テンプレートをsvgで作ることを考えてみました．一般のテンプレートファイルはオフィスアプリケーションで作られていたりpdfで配布されているため，専用のツールを利用する必要があります．これをsvgで作っておけば環境を選ばずに出力可能となるためより利便性が高まるはずです． しかし実際に試してみるとwebブラウザ毎に出力結果が異なる等，中々思い通りには行かないようです．そこで，今回はsvgをwebブラウザで印刷する際の挙動についてまとめて見ました． svgを印刷用途で用いる svgは一般にディスプレイ上にグラフィックを描画するものとして考えられていますが，かつてのsvg1.2ではsvg printとして印刷用途と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
