はてなブックマーク

WebKit（Mac版のSafari含む）では fill-opacity を設定した要素にSVGグラデーションを適用すると色味がくすんでしまいます。 SVGグラデーションを透明化する場合には、 stop-opacity を用いるか、塗りと線のパスを分けた上で塗りのパスに opacity を設定する必要がありそうです。 なお、iOS版Safariでは問題ないもよう（なぜだ）。 現象確認用のデモ 以下の様なSVGで現象が発生します。 <svg viewBox="0 0 300 200"> <defs> <linearGradient id="g0"> <stop offset="0%" stop-color="red"></stop> <stop offset="50%" stop-color="green"></stop> <stop offset="100%" stop-color="bl

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

お詫びと訂正（2016年12月5日追記） 記事初出時に React v15.3.2 では foreignObject要素がサポートされてない、と記しましたがこちらは誤りでした。 React v15.0.0 のリリースノートにてSVGの全ての要素をサポートした、とあるのですが、このタイミングではまだ公式ドキュメントが更新されていませんでした。 また v15.2.x では一部の属性が使用不可と判定されてしまって、コンポーネントのレンダリング自体は意図通りになるものの使用には不安を感じさせる挙動となっていました。 React V15.2.x ではuse要素やforeignObject要素の子要素に必要なxmlns:*属性が使用不可であると警告される しかし、最近になって公式ドキュメントのリライトが始まって、もともと存在した「Reactで使用できる要素と属性の一覧」ページが思いっきり削除されました

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事に書かれている現象は iOS 10.3 にて改修されました。 以下の内容は過去の事象としてご参照ください 何を言っているんだおまえは、と突っ込みたくなる方もいらっしゃるかと思いますが、ありのままに今起こったことを話すぜ…！ まずは動画をご覧ください。 （YouTubeに飛びます） 再現条件とか 以下の環境において端末を横位置にした上で画面をスクロールさせてタブバーを表示させると、{ position: fixed }で配置した要素が正常に機能しなくなります。 上記の動画ではメニューアイコンに張ったクリックイベントハンドラーが動作していないわけです。 iPhone 6s Plus iOS 8.4 / 9.1 / 9.2 / 9.3 / 10.0 / 10.1 / 10.2 Safari iOS用の Mobile Safari では端末を横位置にしたときにのみタブバーが表示される仕様と

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はJavaScript Advent Calendar 2014の記事でもなければ、Frontrend Advent Calendar 2014の記事でもありません。 べ、べつに書こうと思ったらすでに埋まってたとかじゃないんだからねっ！ CSSアニメーションやSVGアニメーションなどを抽象的にタイムラインベースで扱うことのできる web-animations-js が便利なので使い方などを書いておきたいと思います。 公式サイト：https://www.polymer-project.org/platform/web-animat