【JavaScript】Safariでファイルを強制ダウンロードさせようとしてハマった
フロントエンドを生業としていると、クロスブラウザ対応という悪魔の作業がまっている。現在主に使われているブラウザは、Internet Explorer、MS Edge、Chrome、Firefox、Safariが挙げられる。（Opera? そんなブラウザは知らない） これらのブラウザでファイルのダウンロードをさせようとすると、Safariでつまずく。IEですらできるのに、Safariだとできない。新しいタブにダウンロードするファイルの内容を表示して、ユーザにコピペさせるという最悪の動作しかできない。そのようにクライアントサイド（JavaScript）だけでファイルをダウンロードさせる方法を試しているうちにSafari沼にハマってしまった。 ということで、試した内容をまとめようと思う。 aタグにdownload属性を追加する Content-Typeにapplication/octet-str
macOS 10.14.4/iOS 12.2の「Safari v12.1」ではTarget="_blank"リンクがrel="noopener"扱いに。 | AAPL Ch.
macOS 10.14.4/iOS 12.2の「Safari v12.1」ではtarget=”_blank”リンクにrel=”noopener”が付加されるようになっています。詳細は以下から。 Appleは現地時間2019年03月25日にリリースしたmacOS 10.14.4 MojaveやHigh Sierra/SierraアップデートおよびiOS 12.2にデフォルトWebブラウザとなるSafariのv12.1を同梱していますが、このSafari v12.1ではtarget=”_blank”リンクにrel=”noopener”が付加するようになっています。 target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されている
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
CSS Grid Layout: A New Layout Module for the Web
People have been using grid designs in magazines, newspapers, posters, etc. for a long time before the Web appeared. At the point when web developers started to create web pages, many of them were based on a grid layout. Different solutions have been used to create grid layouts, like tables, floats, inline blocks, or flexboxes, but all of these techniques have different issues when you try to defi
Apple、Touch BarやPointer Lock API、HTML Form Validationをサポートした「Safari Technology Preview 19」をリリース。
AppleがTouch BarやPointer Lock API、HTML Form Validationをサポートした「Safari Technology Preview 19」をリリースしています。詳細は以下から。 AppleおよびWebKit開発チームは現地時間12月07日、次期Safariへ搭載が予定されている新機能や不具合修正を行ったプレビュー版Safariブラウザ「Safari Technology Preview」の19度目のアップデートとなる「Safari Technology Preview v19」を新たに公開しています。 Here are the release notes for today’s Safari Technology Preview release 19 update. https://t.co/hpHKTSOR22 pic.twitter.com/F
New Interaction Behaviors in iOS 10
Last year we published a blog post about getting more responsive tapping on iOS. With the release of iOS 10, we’ve made some minor adjustments to the behavior of our fast tapping, and an important change to a very common user interaction: pinch zooming. Fast Tapping A common complaint on iOS 9 and earlier was that events triggered by a user tapping the screen were slightly delayed. This was becaus
iOSのwebアプリモードでの注意点 - 黄色は止レマ
2016 - 04 - 28 iOSのwebアプリモードでの注意点 html・css・javascript 引越しのドタバタで全然更新できていません・・・。 溜まっているネタはまた今度にして、今回は仕事の備忘録です。 iOS のwebアプリモードですね。 正直言って、誰がこの機能を使うんだろう・・・という気がしてなりませんが。 metaタグの設定 webアプリモードの設定 < meta name = "apple-mobile-web-app-capable" content = "{yes,no}" > 上記のmetaタグを設定した状態で ブラウザからホーム画面へショートカットを登録し、そのショートカットから遷移した際に webアプリモードが適用される。 ステータスバーの表示設定 < meta name = "apple-mobile-web-app-status-bar-style
Mobail Safariのcanvas drawImageは元サイズより大きなパラメータ入れてはいけないみたい - やったこと
canvas要素で画像を表示させようとしたら、PCブラウザでは表示できるのに、Mobail Safariでは表示できないケースがあって手こずった。 以下のようにコードを書くと、Mobail Safariだと画像描画できなくて真っ白になってしまう。 var canvas = document.createElement("canvas"); canvas.width = 500; canvas.height = 500; var context = canvas.getContext("2d"); //元img(100*100)より大きなサイズを指定 context.drawImage(img, 0, 0, 101, 101, 0, 0, 500, 500); document.body.appendChild(canvas); どこが悪いのかというと、drawImageのサイズ「101」の
Apple、Safariのテクノロジープレビューを開始 - 数週間ごとにアップデート
米Appleは3月30日(現地時間)、Webブラウザ「Safari」のテクノロジープレビュープログラムを開始し、Safari Technology Preview Release 1(OS X 10.11.4以上)を公開した。Google ChromeやMozilla FirefoxのBetaプログラムと同様、今後Safariに組み込む予定の新しいWebテクノロジーや新機能のプレビュー、最新のパワフルな開発ツールへのアクセスを提供し、フィードバックを収集する開発者向けプログラムだ。 SafariのブラウザエンジンであるWebKitにも「WebKit Nightly」という開発者向けプログラムがあるが、Safari Technology PreviewはSafariの機能を備えたSafariのテスト版であり、Nightlyよりも安定している。Appleによって署名されているので、iCloud
【検証】やっぱりアドブロックでGA無効化は本当だった件【追記あり】
iOS9で僕が一番注目していた点が、アドブロック機能によるGoogleアナリティクスの無効化でした。 噂では聞いていましたが、自分で試してみるまでは・・・という気持ちでわずかな望みに賭けていました。しかしどうやら噂通り、アドブロック機能でGoogleアナリティクスは無効化されてしまうみたいです。 なお、iOS9のアドブロック機能はデフォルトでは実装されていません。Safariをアドブロック化するアプリを入れ、設定をいじることでアドブロックが有効化されます。 さっそくそのアプリを入れて機能をONにし、Safariからこのブログにアクセスすると・・・ やっぱりスマホからのアクセスが計測されていないことがわかります。 そして同時に、アドブロック機能をONにした状態のスマホブラウザからはアドセンスの表示も消えていました。 自分で検証してみた結果、やっぱりGAはアドブロック機能によって無効化されてし
hetmeckr - 最近のChrome, SafariのJavaScriptには音声合成APIが入っています。...
最近のChrome, SafariのJavaScriptには音声合成APIが入っています。 使い方は簡単で、JavaScriptコンソール等で var msg = new SpeechSynthesisUtterance(‘こんにちは!’); msg.lang = “ja-JP”; // 言語指定 window.speechSynthesis.speak(msg); のようにするだけで喋ってくれます。 JavaScriptでMacに歌ってもらう - Okiraku Programming (via otsune) var msg = new SpeechSynthesisUtterance(“ありのー、ままのー、姿ー、見せるのよー”);msg.lang=“ja-JP”;window.speechSynthesis.speak(msg); link
Mobile Safariで扱うことができる画像のサイズの上限 - memo.yomukaku.net
公開日時: 2011-12-19 19:30 Mobile Safariで画像を表示するアプリケーションや、canvasにdrawImage()で画像を表示するアプリケーションをテストしていると、時折画像が表示されない場合があります。 例えば、上の画像はMobile Safariのcanvasに1787px * 2527pxのPNGをdrawImageで描画しようとした状態ですが、何も表示されていません。デスクトップ用のブラウザーでは問題なく表示れます。 原因はiOSのリソースリミットにありました。 iOSの画像に関する各種の上限値 AppleのSafari Developer LibraryのKnow iOS Resource Limitsの節を見ると、iOSの画像に関する上限値が書かれていました。 iOS Mobile Safariの画像に関するサイズ等に関する制限をまとめると以下の
Enabling Remote Debugging via Private APIs in Mobile Safari | Nathan de Vries
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ...Snipped... [NSClassFromString(@"WebView") _enableRemoteInspector]; // ...Snipped... } The Surfin’ Safari article said the remote debugger runs on port 9222, but connecting to http://localhost:9222 while the app was running in the simulator didn’t seem to work. Using lsof showed that
凯时ag网|真人平台·AG(中国)官方网站
Copyright 2012 - 2019 凯时ag网 All Rights Reserved 电话 :189 7654 3210 邮箱: peiW19@hotmail.com
新しいSafariについて予想する - fragmentary
追記 (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
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
Mac Safariの隠しデバッグメニューを表示する裏技 / Inforati
Safariの隠し「デバッグ」メニューを表示する裏技です。 「開発」メニューと異なり、使い道はあまり無いと思いますが一応紹介します。 現在のSafariは「開発」メニューという項目を裏技無しで表示することができます。 「開発」メニューでは、Safari以外のブラウザでWebを開いたり、Safariのユーザエージェントを変更したり様々な機能を利用することができます。 今回紹介するのは、これとは異なり純粋な「デバッグ」メニューの出し方です。 隠しデバッグメニューを表示する方法 「起動ディスク（Macintosh HDなど）」→「アプリケーション」→「ユーティリティ」と移動し「ターミナル」を起動します。 そして、「ターミナル」に以下のように入力します。 defaults write com.apple.Safari IncludeInternalDebugMenu -boolean true そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Selecting a file to upload causes mobile Safari to crash
Pesticide - Kill Your Css Layout Bugs
MobileSafari では unload イベントだけではなく、 load イベントも非推奨だったようです - latest log
