<?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/"
	>

<channel>
	<title>scale &#8211; stoimen&#039;s web log</title>
	<atom:link href="/tag/scale/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>on web development</description>
	<lastBuildDate>Tue, 13 Feb 2018 08:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>Browsers, pixels and graphic rendering!</title>
		<link>/2009/11/05/browsers-pixels-and-graphic-rendering/</link>
		<comments>/2009/11/05/browsers-pixels-and-graphic-rendering/#respond</comments>
		<pubDate>Thu, 05 Nov 2009 19:00:34 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[micro tutorial]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[height]]></category>
		<category><![CDATA[pixels]]></category>
		<category><![CDATA[rendering]]></category>
		<category><![CDATA[scale]]></category>
		<category><![CDATA[width]]></category>

		<guid isPermaLink="false">/?p=807</guid>
		<description><![CDATA[These days I noticed something quite interesting in rendering DOM elements by a sample browser. In my case this was Firefox, but whatever the browser was this happens always. Let me explain you what was the case. I have to render 200 DIV elements, each with 2 pixels width and 30 pixels height. Thus you &#8230; <a href="/2009/11/05/browsers-pixels-and-graphic-rendering/" class="more-link">Continue reading <span class="screen-reader-text">Browsers, pixels and graphic rendering!</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2010/02/18/stylesheets-may-block-rendering-in-ie-the-solution-is-maybe-dynamic-loading/" rel="bookmark" title="Stylesheets may block rendering in IE. The solution is maybe dynamic loading.">Stylesheets may block rendering in IE. The solution is maybe dynamic loading. </a></li>
<li><a href="/2009/05/25/javascript-random-numbers/" rel="bookmark" title="JavaScript random numbers">JavaScript random numbers </a></li>
<li><a href="/2009/11/11/jquery-css-functions-part-2-width-and-height/" rel="bookmark" title="jQuery CSS functions. Part 2 &#8211; width() and height()">jQuery CSS functions. Part 2 &#8211; width() and height() </a></li>
<li><a href="/2010/03/10/change-the-viewport-be-ready-for-the-iphone/" rel="bookmark" title="Change the Viewport, be Ready for the iPhone!">Change the Viewport, be Ready for the iPhone! </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<p>These days I noticed something quite interesting in rendering DOM elements by a sample browser. In my case this was Firefox, but whatever the browser was this happens always.</p>
<p>Let me explain you what was the case. I have to render 200 DIV elements, each with 2 pixels width and 30 pixels height. Thus you got something like a scale.</p>
<p>So far so good. The problem is that if you get some random width for the scale as the browser can be resized. If you&#8217;d like something like random space (gap) between the scale bars you get something like 7,35 pixels between every two bars.</p>
<p>Of course the browser cannot use non integer pixels so it starts to render gaps which are 7 pixels wide and in every few pixels it renders 8 pixel single gap. Thus he corrects this problem.</p>
<p>My advice is &#8211; don&#8217;t make the browser think and round the pixels. Use fixed integers to make browser flow faster. You can fix the whole width to be multiple of 200 pixels which is the number of bars.</p>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2010/02/18/stylesheets-may-block-rendering-in-ie-the-solution-is-maybe-dynamic-loading/" rel="bookmark" title="Stylesheets may block rendering in IE. The solution is maybe dynamic loading.">Stylesheets may block rendering in IE. The solution is maybe dynamic loading. </a></li>
<li><a href="/2009/05/25/javascript-random-numbers/" rel="bookmark" title="JavaScript random numbers">JavaScript random numbers </a></li>
<li><a href="/2009/11/11/jquery-css-functions-part-2-width-and-height/" rel="bookmark" title="jQuery CSS functions. Part 2 &#8211; width() and height()">jQuery CSS functions. Part 2 &#8211; width() and height() </a></li>
<li><a href="/2010/03/10/change-the-viewport-be-ready-for-the-iphone/" rel="bookmark" title="Change the Viewport, be Ready for the iPhone!">Change the Viewport, be Ready for the iPhone! </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2009/11/05/browsers-pixels-and-graphic-rendering/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
