:checked擬似クラスの隣接セレクターのWebkit系での挙動とか
:checked擬似クラスはCSS3で追加されたセレクターで、ラジオボタンやチェックボックスがチェックされた状態を指定する擬似クラスです。 See the Pen test :checked pseudo class by You Sakai (@webcre8) on CodePen. このデモはinput要素に隣接したラベルに、さらに隣接した非表示になっている要素をチェックの入ったときにのみ表示させるというものです。これがFirefoxやChrome（ちなみにMac）では動くんですが、iPhoneのSafariとChromeでうまく動きませんでした。Android（4.4）はいけました。 原因 これはどうやらWebkitのバグであるらしいです。FirefoxはGecko、ChromeはBlinkですが、iOSのSafariはWebkitですね。iOSはChromeもWebkitなので全
Improved Support for Images on High-Resolution Displays
WebKit now supports the srcset attribute on image (<img>) elements (official specification from the W3C). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don’t. Importantly, it also provides a graceful fallback for browsers that don’t yet support the feature. See the new feature in action. Note that
Convert WebKit Changeset to WebKit Version
WebKit Changeset ⇒ WebKit Version Detect WebKit version of this changeset: Ermittle die WebKit Version von Changeset: (opens new window) (öffnet neues Fenster) trac.webkit.org ⚠️ Changeset < 20219 WebKit < 522.0 (bis 2007-03-14) kann nicht ermittelt werden Can't find changesets < 20219 WebKit < 522.0 (before 2007-03-14) MAJOR_VERSION = ? MINOR_VERSION = ? TINY_VERSION = ? MICRO_VERSION = ? NANO_VE
jQuery Animations with automatic CSS3 transitions when possible
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
Fixing the background 'bleed'
Fixing the background ‘bleed’ I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). After seeing David Cole tweet about the same issue I resolved to find a solution, and it came in the form of the -webkit-background-clip property. -webkit-backgro
/trunk/Source/WebCore/css/html.css – WebKit
Fix styling of th elements when explicitly specifiying text-align:inherit https://bugs.webkit.org/show_bug.cgi?id=138577 Patch by Ryan Reno <rreno@apple.com> on 2022-06-16 Reviewed by Tim Nguyen. <th> elements were being incorrectly centered when specifying text-align: inherit. This fixes that bug by adding a new internal CSS value for use in the UA stylesheet. This also removes a non-inherited
Changeset 113503 – WebKit ― Block cross-origin iframe scroll to fragment.
Show lines around each change Show the changes in full context Timestamp: Apr 6, 2012, 3:15:02 PM (12 years ago) Author: tsepez@chromium.org Message: Block cross-origin iframe scroll to fragment. https://bugs.webkit.org/show_bug.cgi?id=73083 Reviewed by Adam Barth. Add a restriction similar to what FF has done for all iframes for over a year now. Our change is less disruptive in that it only does
WebKit.js: Yes it has finally happened! Browser...
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. I knew this was going to happen eventually, it was just a matter of time. WebKit has been ported to JavaScript, and no, this is not just some Emscripten compile, it is a full hand port of the popular browser engine to JS. WebKit.js uses WebGL as a rendering backend and bas
src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
Shadow DOM, Pointer Lock and a new CSS Lexer « Peter Beverloo
Published on January 30th, 2012 in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18 929 changes landed at Chromium’s repository last week, whereas WebKit’s received 626, totaling up to 1,555. Highlights include quite some progress on implementing the Shadow DOM and the Pointer Lock API. Web Inspector’s Timeline Panel has been extended with three graphs, all hidden behind the Experimental
Test page for -webkit-font-smoothing | Christoph Zillgens
Hint: This only works in OS X, Windows-user won’t see any difference! -webkit-font-smoothing: none; I feel sorry for the thousands of IE6-Users around the world seeing the web like this subpixel-antialiased; AMNZ This is the standard, seems like Safari 5 improved it, and there doesn’t seem to be a big difference to the right column. Look at the uppercase M to see that diagonal lines are displayed
ニュースリリース ACCESS、WebKitベースの情報家電向けブラウザ 「NetFront® Browser NX v2.0 DTV Profile」を発表
'12.01.05 ACCESS、WebKitベースの情報家電向けブラウザ 「NetFront® Browser NX v2.0 DTV Profile」を発表 －高いメモリ使用効率と安定性、移植性を実現し、 HbbTV、国内VOD規格など幅広いデジタルテレビ向け放送・IPTV規格に対応－ 株式会社ACCESS（本社：東京都千代田区、代表取締役社長：室伏 伸哉、以下ACCESS）は、本日、WebKitをベースにした情報家電向けブラウザの最新版「NetFront® Browser NX v2.0 DTV Profile」を開発し、提供を開始した旨を発表いたしました。最新版は、高いメモリ使用効率と、優れた安定性、移植性を実現すると共に、HbbTV※1やBBC iPlayer※2、国内VOD（Video On Demand、動画配信サービス）規格であるデジタルテレビ情報化研究会仕様、CE-HTM
CSS Filter Effects!
「CSS Filter Effects」の紹介をしてみたいと思います。 現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 - 5. The ‘filter’ property 2011年12月16日版を参考に書いていきたいと思います。 サンプルページは以下です。 CSS Filter Effects Sample このサンプルの画像は、通常だと次のように表示されます。 左側がjpg画像で、右側はハートの外側が透過されているpng画像です。 これにフィルタをかけていきます。 なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。 このプロパティをWebkitで使
Android 2.2の不具合 - makogの日記
スマートフォン対応サイトにて、Galaxyで<input>にfocusをあてると、ウィンドウが変にスクロールしてしまうという問題が報告された。 いろいろ調べてみると、Android 2.2 では対応していないCSS3 Animationの指定をすると誤動作する、ということらしい。 jQTouchの場合 http://code.google.com/p/jqtouch/issues/detail?id=398 下記のようにCSSをデフォルト値で上書きすると症状がおさまる。ただし、iOSや2.2以外のAndroidにも影響を与えてしまう（画面遷移の際に点滅したりする）ので、UAで判定をかけてAndroid 2.2の場合だけ以下の指定になるように改造する必要がありそうだ。 body { -webkit-perspective: none; -webkit-transform-style: fla
HTML5 と CSS3 で 死にたい
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
iPhone clickイベント - kotaroito's notes
li要素をタップしたら、ほげほげ（アラート出す、ハイライトする、etc）させたかったのでonclickを使ってたんだが、どうも動きがもっさり。ググってみるとこんな記事が。 Remove onClick delay on webkit for iPhone Developing on the webkit for iPhone I encountered a curious delay on onClick events. It seems that the click is triggered with about 300 milliseconds delay. While this is unnoticeable on a standard web page, it can be annoying on a web application. Fortunately the click e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome/webkit not rendering css display change on input:checked + element + element
http://lab.simurai.com/icons/
公海555000kk线路检测—首页（欢迎您）
Disable caching, fake your user agent and more in Chrome | Efficient geek | Useful shortcuts and other geeky tips