アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2011年12月

2011年12月21日

Mac版chromeの最新版(ver.16)でCSS3のborder-imageのレンダリング不具合?(11/12/21解決)

成功者になるための必読ブログとは?

chromeをバージョンアップ。

先日、macのchrome最新版(ver.16)が出たのでさっそくアップデート。
...ええ。新しもの好きなので。

普通にサイトを見てる分には特に問題は出てなかったんだけど...んが。

制作する側としてはちょっと困ったことが。

どうやら、CSS3のborder-imageをつかった部分に背景が表示されないという不具合が発生しているらしい。

ver.15.xのときは問題なかったので、おそらくバグではないかと。

おそらくバグなのでは?

海外のコミュニティでも同様の話題が。

中学生英語とインチキ口語英語で止まっている僕の読解力では...完璧には読みこなせていませんが(汗)

『オレも背景がでねーよ』

『ver.15のときはなんともなかったのに...バグじゃね?』

っていうようなことを言っている気がします。

ちなみに、chromeの厳密なver.は『16.0.912.63』です。

日本のサイトでもいろいろと探してみたけれど、いまのところこれ系のネタがないので、念のため備忘録として。

※もしかしたら僕のコードミスかもしれないので...(汗)

該当するCSS部分のコード。

.hoge {
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
}

ボーダーの部分は今まで通り。
本来背景もボーダーで指定した画像が表示されるはず。

今までは上記のコードで普通に出ていたし、そもそもsafariやFirefoxでは表示されるので、前述のとおりバグなのでは...と思っています。

11/12/21追記

いろいろと試したところ、コードの順番が影響しているようです。
上記の場合、chromeだけ背景が表示されませんが、

.hoge {
border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 / 5px 15px 5px 5px stretch;
}

としたところ、表示されました。
つまり、border-imageを接頭辞(-webkit)で上書きすることでOKってことですかね。

12/01/12追記

chromeのbugzzilaによると、どうやらborder-imageは『fill』属性を指定しないと中身が表示されないらしい。
(デフォが透過らしいので。⇒border-image-slice-fill

んで、-mozと-webkitについては『fill』は無視するので、

上記で、順番をそのままにした場合、border-imageに『fill』を追加して

.hoge {
-moz-border-image: url(../img/btn_direct_r.png) 5 15 5 5 stretch;
-webkit-border-image: url(../img/btn_direct_r.png) 5 15 5 5 stretch;
border-image: url(../img/btn_direct_r.png) 5 15 5 5 fill stretch;
border-width: 5px 15px 5px 5px
}

こんな感じか。

現状、11/12/21の追記のとおり、順番の入れ替えでも大丈夫だったけど、fillを入れろってのはW3Cが言ってることなので、そっちにならっておくのがいいかもしれないですね。

 

投稿者 kuro : 04:59 | 固定リンク | ID:850

ページトップ△

2011年12月 6日

今年は...リスタートです。

成功者になるための必読ブログとは?

あらためまして...こんばんみ。(by ビビる大木)

ということで、毎年恒例のこの日がやってまいりました。

何の日かって?それは...あの高名な誉れ高き偉人、そう...あの方の御聖誕の日です。

とうとう大台に突入!

...って、自分の誕生日をことさらに盛り上げて言ってみる。
だって...誰も言ってくれないから(泣)

...ウソです。
いろいろなところで、いろいろな方々からお祝いの言葉を頂いて、まさに感無量であります。

朝起きて、PCを開いて作業して、3時のおやつ(?)を食べに渋谷に出て、いつものカフェでまた作業...と、まぁ、生活の上では何の代わり映えもしない一日ですが、今年はいつもとはちょっと違う気分なことがひとつ。

そうです。

ご存じの方もそうでない方もいるとは思いますが、とうとう...大台に突入です。

えぇ。40になりましたさ。
きゃーっ!!きゃーっ!!!!

子どものころ、30歳ってのはすごく大人だった。
そして、40歳なんてのは...もう完璧な大人で、言い方を変えれば『完璧なおっさん』だった。

んで、いざ自分がなってみると...。

『ご、ごめんなさい!こんな未熟者でごめんなさいっ!!!!』

と、全身全霊を込めて誰かに土下座したい気分です。(汗)

もちろん、40年も生きてきたわけで、それ相応の経験や知識は身についているんだけれど、昔思い描いていた『大人の男』とは、かなりかけ離れている自分に、他人ごとのようにビックリです。(他人ごとじゃダメだろ?)

でも、こうも言えるんじゃないかなと。

『昔、大人だと思っていた人たちも、ほんとは未熟だったんじゃないか?』

って。

大人って。大人って...。

昔『大人のふりかけ』のCMでこんなフレーズがありましたね。
(え?知らない?じゃあ、こちらで

なんとなく年をとると大人になっていく...。
僕らは漠然とそんな風に思っているけれど、そもそも『大人』という定義が曖昧で、不確定なもの。

そもそも若くても落ち着いて、偉業を達成して名を残し、誰からも尊敬されるような立派な人もいれば、いくつになっても甘えんぼう♪(by 間寛平)...じゃなくて、いくつになってもうだつの上がらないダメな人もいるわけで、つまり大人の定義は『年齢』じゃないんだと。(誰もが知っていると思いますが。)

それに、自分が思う『大人』になれれば、世間様と多少ずれていてもいいんじゃないかなと。

じゃあ、僕の思う大人って...なに?ってことなんですが、それはまた別の機会にw

今年の抱負は...。

さて。今年の抱負ですが、ちなみに去年は『リセット』さらにその前は『原点回帰』でした。

...戻ってばっかじゃんっ!というツッコミが聞こえてきますが、なかなかこれができないんですw
道に迷うことばかりで、歩みの遅いノロマな亀なので。(このへんのフレーズは80年代大映テレビをご参照ください)

こ、こほん...。
話がそれましたが、今年の抱負を一言で表すならば

『リスタート』

です。
そろそろまた進み始めろよ自分...と。

下一桁が0になった今年、まさにリセットし、そしてまた新たにスタートするいい区切りの年になりそうです。

やれなかったこともあるけれど、実現したこともある。
そして、まだまだやりたいこともたくさん。

いろいろな人に生かされて40歳になれました。
有形無形で、いつも僕を支えてくれているみなさん。ほんとうにありがとうございます。
ますますがんばりますので、今後ともよろしくお願いいたします。

とりあえずメモ。

『自分が未熟だということを認めつつ、自分の日々の成長を喜び、驕ることなく自分や周りの人を大切にする』
『自分の成長こそが、人を幸せにする唯一の方法』

 

投稿者 kuro : 17:35 | 固定リンク | ID:849

ページトップ△