<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>O2-oxygen &#187; CSS</title>
	<atom:link href="http://oxygen.kerox.info/archives/category/web/css-web/feed" rel="self" type="application/rss+xml" />
	<link>http://oxygen.kerox.info</link>
	<description>このブログには、Mokoによる絵と、ガジェット・アプリケーションの事やごちゃごちゃした考えをまとめた文章と、生活の記録があります。</description>
	<lastBuildDate>Fri, 16 Jul 2010 16:09:01 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://oxygen.kerox.info/archives/category/web/css-web/feed" />
		<item>
		<title>MacでWindowsXPを動かすと、Safariのbackgroundプロパティでバグが発生する</title>
		<link>http://oxygen.kerox.info/archives/349</link>
		<comments>http://oxygen.kerox.info/archives/349#comments</comments>
		<pubDate>Mon, 09 Feb 2009 15:19:34 +0000</pubDate>
		<dc:creator>Moko</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[Safariのバグ]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://oxygen.kerox.info/wordpress/?p=349</guid>
		<description><![CDATA[そこはかとなく専門的な話。
MacでWindowsを動かしているのだが、Safariを使っているときに致命的なバグを発見した。
要素の背景に対して、背景画像を繰り返しなしで、位置を指定して表示させるCSSを書くと、
Wi [...]]]></description>
			<content:encoded><![CDATA[<p>そこはかとなく専門的な話。<br />
MacでWindowsを動かしているのだが、Safariを使っているときに致命的なバグを発見した。<br />
要素の背景に対して、背景画像を繰り返しなしで、位置を指定して表示させるCSSを書くと、<br />
Windows on Mac + Safariでは画像が一切表示されなくなる。<br />
具体的には<br />
&lt;div&gt;もげもげ&lt;/div&gt;<br />
に対して、下のようなmoge.png という背景画像を用意し、<br />
<img src="/wordpress/wp-content/uploads/2009/02/moge.png" alt="実験用画像 moge.png" width="300" height="200" /><br />
div {<br />
height: 200px;<br />
background: white url(moge.png) no-repeat 100% 100%;<br />
border: 1px solid #0000aa;<br />
padding: none;<br />
margin: 60px;<br />
}<br />
というスタイルシートを書いたとする。<br />
すると、通常以下のようにレンダリングされる筈である。<br />
テストはOpera、Firefox、IE8、Chromeで行った。いずれも正しいレンダリングである。<br />
<img src="/wordpress/wp-content/uploads/2009/02/four_browsers.jpg" alt="Opera,Firefox.IE8,Chromeでのレンダリングテストの結果" width="500" height="345" /><br />
Safariではこうなる。<br />
<img src="/wordpress/wp-content/uploads/2009/02/safari.png" alt="Safariでのレンダリングテストの結果" width="500" height="338" /><br />
気になって色々調べてみたら、似たようなバグが昔のバージョンのSafariでは確認されていて、特に回避方法は見つかっていないそうだ。<br />
現在のMac用のSafariでは修正されているらしく、きちんとレンダリングしてくれる。<br />
まあ、わざわざWindowsをMacで動かしたあげく、Safariを使う人もそうそういないだろうから大した問題ではないのだろうけど・・・<br />
&#8211;<br />
参考ページ(だいぶ古いバージョンのSafariに関する話)<br />
<a href="http://www.revulo.com/blog/20070907.html" target="blank">れぶろぐ:　Safari の backgroung-position のバグ</a><br />
<a href="http://mb.blog7.fc2.com/blog-entry-95.html" target="blank">てんぽ : メモ：Safari background-imageのバグ</a><br />
&#8211;<br />
面白いことに、WindowsしかOSの入っていないマシンでSafariを動かしてもこのバグは再現できない。Appleめ。<br />
MacでWindowsなんか動かすからこうなるんだ、という話でした（のかもしれない）。</p>
]]></content:encoded>
			<wfw:commentRss>http://oxygen.kerox.info/archives/349/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://oxygen.kerox.info/archives/349" />
	</item>
	</channel>
</rss>
