CSS Underlines Are Too Thin and Too Low in Chrome | CSS-Tricks
I’ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article. Table of Contents Default underlines are inconsistent Luckily, we can override the browsers’ defaults Chrome bug 1: Underlines are too thin on macOS Chrome bug 2: Underlines are too low Help prioritize the Chrome bugs
SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ
先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（アスペクト比が同じ場合、バグに気づきません）。 ※SVG伝道師の松田さんが「一概にバグではないと思う」とツィート されていたので参考までに仕様へのリンクを記事の最後に追記しておきました。 バグが発生する条件とデモ 実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。 デモはこちら このバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。 SVG 下の画像のようにサイズが132 x 160p
僕が遭遇したIE11固有の不具合とその対策 - Qiita
最近大学時代の同期と飲んだらMSに転職したので 現在から過去の案件で産廃IEくたばれと心底思った発生した事象と対策を書いていきます 他にもこんなことあったぜ！って意見ありましたらお待ちしております。 キャッシュ Windows10のIE11で遭遇した事象 ログイン→ログアウト→別アカウントログイン したときの挙動が最初のログインアカウントの状態のレスポンスが返ってくる Authorization: Bearerヘッダーが再ログインしても前のBearerトークンが残り続ける APIレスポンスが前回のものが返ってくる JSのすごい人に助けてもらいました・・・ ClearAuthenticationCacheを無効にする リクエストキャッシュしないようにリクエストパラメータ末尾に日付をつける→jQueryでもこの方法で回避しているらしい これIEのバグですよね？ // ClearAuthenti
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
Web用に保存で100%のサイズにならない
/t5/photoshop-%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97-mobile-web-%E7%89%88-discussions/web%E7%94%A8%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%A7100-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84/td-p/5350542 Aug 15, 2013 Aug 15, 2013 Photoshop CC バージョン : 14.0 (14.0 20130423.r.221 2013/04/23:23:00:00) x64 オペレーティングシステム : Mac OS 10.8.4 Webサイト用の素材をスライスしてWeb用に保存
iOS 8.4.1の:hover問題
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
Internet Explorer 10や11でSVGがぼやけてリサイズされる(ことがある)
Windows 7向けのInternet Explorer 11が出たので、早速インストールした。おかしいところも特になく、F12ツールもずいぶん使いやすくなってるし最高かと思ったら、このウェブサイトのSVGのリサイズがちょっと変だった。11だけかと思ったら10もだった。少し前までのFirefoxみたいにCSSのbackground-imageプロパティー経由だとアレなのかとか色々調べてたみたけど、どうも違う。どうやらリサイズ後の縦横サイズが小数点以下を含むようなケースでぼやけるようだ。 Demo: SVG Resizing Bug on IE10から11 デモのように64.5pxのように小数点以下を含むサイズにリサイズすると、Internet Explorer 11(10も)では参考のスクリーンショットのようにぼやける。整数ピクセルでのリサイズやFirefox 25やChrome 30で
SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる
SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる2014.12.06 これはSVG Advent Calendar 2014の参加記事です。 昨日（12/4）はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。 6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。 SVGスプライトとは body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。 SVGスプライトでハマる 上記のように、ロゴを多用している箇所をSVGスプライト（symbol）を用いて対処しようとしてハマりました
Chrome 35でオンマウス時に画像がずれる
久々にソーシャル・ネットワークのアイコン的なものを作ろうとしていた所、オンマウスで画像のコンテナのサイズが微妙に変わり、画像の位置が微妙にずれるという現象に遭遇した。どうやら%単位でpaddingプロパティーを指定すると起こるようだ。Chrome 35のバグっぽい。 Demo: Image Displacement on Hover 親がfloatプロパティーを使っていたり、display: inline-bockだったりして、子の画像の大きさによりサイズが変化する場合にのみこのバグは再現できる。ずれの量はタイミングと画像のサイズによって変化する。 何がずれているのかを明らかにするためにoutlineプロパティーを指定してみたところ、親の幅がおかしなことになっているようだ。親の幅と画像の幅が相互に関係し合うような形になっているため、%単位でpaddingプロパティーを指定するとサイズが決ま
line-height: normal !important
たまに忘れてFirebugで調査して「あーそうだった！ これだよ！ クソが！ 俺か！」みたいな。これはFirefoxのフォーム系の置換要素に設定してあるデフォルト・スタイルで、入力ボックスとボタンの高さを揃えるのが面倒くさい原因のひとつ(もちろんこれだけではない)。これはかなり昔からあるけど「置換要素がline-heightプロパティーで高さ変わるわけねーだろクソが」という理由によりWon't Fixなので、死ぬまで付き合うことになりそう。 !importantなため制作者スタイルからはどうあがいても上書きするのは無理なので、他のブラウザー向けにline-height: normalを設定してやるのがまず必要。その上で入力ボックスとボタンのbox-sizingプロパティーが違うことに気をつけ、高さを指定する。 input[type="text"] { height: 1.75em; lin
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ 表題のとおりですが、少しわかりにくいので詳しく説明します。 このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。 ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh
jQuery2.1.0にて-webkit-transitionが無効になるバグ
Updated 2014.03.15 / Published 2014.03.15 jQuery2.1.0にはCSS()メソッドで指定した-webkit-transitionのスタイル情報が無効になるバグがあります。このバグはjQuery2.1.1にて改善される予定です。 jQuery2.1.0における-webkit-transitionスタイル無効の再現例 $('#test').css({ '-webkit-transition': '-webkit-transform 1s', 'transition': 'transform 1s' }); 上記のようにCSS()メソッドでChrome, Opera, Safariなどのための-webkit-transitionのスタイル情報が指定されていても、jQuery2.1.0では適用されません。これはjQuery2.1.0にてベンダープレフィ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGをimgで表示した場合にIEだけサイズが変になる現象を直す - Qiita
Tumblr
http://www.tyack.net/2015/01/27/accessibility-frustrations-with-apple-voiceover-on-ios-8-1/
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
overflow:hidden;してるのに、はみ出る #CSS珍百景
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
親がdisplay: table-*;の時、子のimg {max-width: 100%; }が効かない
