タグ付けされた質問 「safari」

SafariはAppleのWebブラウザであり、macOSおよびiOSのデフォルトのブラウザです。

14
<body>に適用されたoverflow:hiddenはiPhone Safariで機能しますか?
んoverflow:hiddenに適用される&lt;body&gt;iPhoneのSafariで動作しますか?そうではないようです。それを達成するためにウェブサイト全体にラッパーを作成することはできません... あなたは解決策を知っていますか? 例:長いページがあり、「折り目」の下にあるコンテンツを非表示にしたいのですが、iPhone / iPadで動作するはずです。
131 iphone  css  ipad  safari  overflow 


10
Macを所有していないときにMac / SafariでWebアプリケーションをテストする
最近立ち上げたWebサイトがWindowsのIE、Firefox、Chrome、Safariで完全に表示されたが、MacでSafariを使用して表示したときに(潜在的な顧客によって)破損していたため、最近気付かれ、サイトの外観をテストする必要があります。 Macで表示されます。 問題は、Macを所有していないことです。 多数のブラウザーがインストールされているMacへのVNCアクセスを提供すると主張するBrowsrCampを試しましたが、信頼性が低いことが判明した後(これまでのところ、過去5日間は1日間動作しました)、別のソリューションが必要です。 助言がありますか?
122 macos  safari 

3
SystemJSのようなモジュールローダーを使用する場合のSafariのWebインスペクターでのデバッグ
私が作成していますIonic使用してアプリをes6 modules、TypeScriptおよびSystemJSモジュールローダとして。これは私のセットアップです: tsconfig.json: { "compilerOptions": { ... "target": "es5", "module": "system", ... } } index.html: &lt;script src="lib/system.js"&gt;&lt;/script&gt; &lt;script src="systemjs.config.js"&gt;&lt;/script&gt; &lt;script&gt;System.import('js/app.js')&lt;/script&gt; スクリプトの例(TypeScript): import {IConfig} from "./app-config"; export class ConfigLoader { ... } Chromeですべてがうまくいきます。ただし、SafariのWebインスペクターを使用してデバッグする場合、WebインスペクターはHTMLから直接読み込まれたスクリプト(スクリプトタグを介して)のみを表示し、XHR(私の場合はSystemJS)によって読み込まれたスクリプトを表示しないため、スクリプトにブレークポイントを配置できません。 。つまり、自分のスクリプトをデバッグすることはできません。もちろん、これは受け入れられません。 以前のようにSystemJSを使用してこれを回避しようとしましたが、次のようにスクリプトタグをhtmlに配置しました。 &lt;script src="lib/system.js"&gt;&lt;/script&gt; &lt;script src="systemjs.config.js"&gt;&lt;/script&gt; &lt;script src="js/app-config.js"&gt;&lt;/script&gt; ... other app scripts &lt;script&gt;System.import('js/app.js')&lt;/script&gt; ただし、SystemJSはこれについて満足していないようなので、これは機能しません。 無効なSystem.register呼び出し。匿名のSystem.register呼び出しは、SystemJS.importによって読み込まれたモジュールでのみ実行でき、スクリプトタグ経由では実行できません。 SystemJSをどのように使用し、同時にSafariでデバッグすることができますか?「各スクリプトにデバッガーステートメントを置く」よりも少し洗練された解決策を探しています...

7
MacのSafariで選択した要素の光沢を削除するにはどうすればよいですか?
MacおよびiOSデバイスのSafariでは&lt;select&gt;、背景色のある要素はそれ自体に光沢を生成します。これは、他のオペレーティングシステムでは発生しないようです。 たとえば、次のスタイルプロパティを持つselect要素があります。 select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } そして、私の要素には必要な背景色がありますが、光沢はまだ残っています。誰もがそれをフラットカラーにする方法を知っていますか?

6
一部のフォントサイズがSafari(iPhone)で大きくレンダリングされる
Safari / iPhoneが一部のフォントサイズ設定を無視するCSSまたはその他の理由はありますか?私の特定のWebサイトでは、iPhone上のSafariがfont-size:13pxのテキストをfont-size:15pxのテキストよりも大きくレンダリングします。一部の要素のフォントサイズをサポートしていないのでしょうか?

1
Safari 10で回転するとSVGの色が変わる
Safari 10でのみ発生する非常に奇妙な問題が発生しました。トランプ、svg画像があり、これらはを使用して回転される場合がありtransform:rotate(xdeg)ます。 私が使用しているカードは赤いブロックパターンです。回転していない場合、または直角、つまり90、180、270度に回転している場合は、正常に見えます。しかし、それ以外の角度と背景パターンは青くなります!私はユーザーの1人からこれに関するレポートを受け取ったばかりで、奇妙なものを見たことはありません。他のブラウザはすべて正常に動作し、Safari 9は正常に動作します。 これはSafari 10の非常に奇妙なバグだと思いますが、回避策に関するアイデアはありますか?私は次の場所で最小限の再現を作成しました: https://jsfiddle.net/2zv4garu/1/
109 html  css  svg  safari 

13
JavaScriptの無名関数に対するremoveEventListener
その中にメソッドを持つオブジェクトがあります。これらのメソッドは、無名関数内のオブジェクトに配置されます。次のようになります。 var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, y); }; t.scrollTo = function(x, y) { window.scrollTo(x, y); }; }); (もっと多くのコードがありますが、これは問題を示すのに十分です) 次に、イベントリスナーを停止したい場合があります。したがって、私はremoveEventListenerを実行しようとしていますが、これを行う方法を理解できません。他の質問で、匿名関数でremoveEventListenerを呼び出すことは不可能であると読みましたが、これはこの状況の場合にも当てはまりますか? 無名関数内に作成されたメソッドがあり、それが可能だと思いました。このように見えます: t.disable = function() { window.document.removeEventListener("keydown", this, false); } なぜこれができないのですか? これを行う他の(良い)方法はありますか? ボーナス情報; これはSafariでのみ機能する必要があるため、IEサポートがありません。

14
iOS Safari –オーバースクロールを無効にして、スクロール可能なdivに通常のスクロールを許可する方法
私はiPadベースのWebアプリで作業しています。Webページのように見えないように、オーバースクロールを防ぐ必要があります。私は現在、これを使用してビューポートをフリーズし、オーバースクロールを無効にしています: document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); これはオーバースクロールを無効にするのに最適ですが、私のアプリにはいくつかのスクロール可能なdivがあり、上記のコードではスクロールできません。 私はiOS 5以上のみをターゲットにしているので、iScrollのようなハッキーなソリューションは避けました。代わりに、スクロール可能なdivにこのCSSを使用しています。 .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; } これはドキュメントのオーバースクロールスクリプトなしで機能しますが、divスクロールの問題を解決しません。 jQueryプラグインなしで、オーバースクロールの修正を使用する方法はありますが、私の$( '。scrollable')divを免除しますか? 編集: 私はまともな解決策であるものを見つけました: // Disable overscroll / viewport moving on everything but scrollable divs $('body').on('touchmove', function (e) { if (!$('.scrollable').has($(e.target)).length) e.preventDefault(); }); divの先頭または末尾を超えてスクロールしても、ビューポートは移動します。それを無効にする方法も見つけたいのですが。


3
Safariでtextareaサイズ変更ハンドルを非表示にする
アプリケーションでtextareaコンポーネントを使用しており、その高さを動的に制御しています。ユーザーが入力すると、十分なテキストがある場合は常に高さが増加します。これは、IE、Firefox、Safariで正常に動作します。 ただし、Safariでは、右下に「ハンドル」ツールがあり、ユーザーはクリックしてドラッグすることでテキストエリアのサイズを変更できます。私はまた、stackoverflow Ask a Questionページのtextareaでこの問題に気づきました。このツールは混乱を招き、基本的に邪魔になります。 それで、とにかくこのサイズ変更ハンドルを隠す方法はありますか? (「ハンドル」が正しい単語かどうかはわかりませんが、もっと良い用語を考えることはできません。)
97 safari  webkit  css 

12
ios8のSafariは、固定要素がフォーカスを取得すると画面をスクロールします
IOS8 Safariでは、位置が修正された新しいバグがあります。 固定パネル内のテキストエリアにフォーカスすると、Safariがページの一番下までスクロールします。 これは、ページを一番下までスクロールして場所を失うことなくテキストエリアにテキストを入力する方法がないため、あらゆる種類のUIを操作することを不可能にします。 このバグをきれいに回避する方法はありますか? #a { height: 10000px; background: linear-gradient(red, blue); } #b { position: fixed; bottom: 20px; left: 10%; width: 100%; height: 300px; } textarea { width: 80%; height: 300px; } &lt;html&gt; &lt;body&gt; &lt;div id="a"&gt;&lt;/div&gt; &lt;div id="b"&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
96 javascript  ios  css  safari  ios8 

10
無効な入力テキストの色
以下の単純なHTMLは、FirefoxとWebKitベースのブラウザーでは異なって表示されます(私はSafari、Chrome、iPhoneでチェックインしました)。 Firefoxでは境界線とテキストの両方が同じ色(#880000)ですが、Safariではテキストが少し明るくなります(透明度が適用されているかのように)。 どういうわけかこれを修正できますか(Safariでこの透明度を削除します)? &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; input:disabled{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=""&gt; &lt;input type="text" value="disabled input box" disabled="disabled"/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;
93 iphone  html  css  safari  webkit 

5
NodeJS / express:キャッシュと304ステータスコード
Expressで作成されたWebサイトをリロードすると、NodeJSサーバーから304ステータスコードが送信されるため、Safari(Chromeではなく)で空白のページが表示されます。 これを解決する方法は? もちろん、これはSafariの問題である可能性もありますが、実際には他のすべてのWebサイトで正常に機能するため、NodeJSサーバーでも問題になるはずです。 ページを生成するために、私はJadeを使用していres.renderます。 更新: Safari'cache-control': 'max-age=0'がリロード時に送信するため、この問題が発生するようです。 更新2:回避策がありますが、より良い解決策はありますか?回避策: app.get('/:language(' + content.languageSelector + ')/:page', function (req, res) { // Disable caching for content files res.header("Cache-Control", "no-cache, no-store, must-revalidate"); res.header("Pragma", "no-cache"); res.header("Expires", 0); // rendering stuff here… } 更新3: したがって、完全なコード部分は現在次のとおりです。 app.get('/:language(' + content.languageSelector + ')/:page', pageHandle); function pageHandle (req, res) { var …

23
HTML5ビデオタグがSafari、iPhone、iPadで機能しない
13sなどの小さなビデオがあるhtml5 Webページを作成しようとしています。このビデオのフラッシュバージョンを3つの形式に変換しました。fireFoggを使用する.ogv、firefoggを使用する.webm、およびHandBrakeアプリケーションを使用する.mp4 htmlスクリプト私は自分のページで使用しました: &lt;video width="800" height="640" loop preload="false" autoplay controls tabindex="0"&gt; &lt;source src="xmasvideo/video.mp4" type="video/mp4" /&gt; &lt;source src="xmasvideo/M&amp;P-Xmas 2.ogv" type="video/ogv" /&gt; &lt;source type="video/webm" src="xmasvideo/M&amp;P-Xmas.webm" /&gt; &lt;/video&gt; ビデオはChromeとFireFoxで正常に動作していますが、デスクトップのSafariでもiPhoneまたはiPadでもまったく動作していません。出力は、ビデオタグのコントロールを示すだけの空白のページですが、何もロードされていません 私が持っているSafariバージョンはHTML5ビデオをサポートしていることに注意してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.