<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<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>chromium &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/tag/chromium/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Mon, 23 Jun 2025 09:03:34 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>chromium &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[An annoying SVG animation bug in Chrome]]></title>
		<link>https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/</link>
					<comments>https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#respond</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Mon, 23 Jun 2025 11:34:12 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[chromium]]></category>
		<category><![CDATA[svg]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=61537</guid>

					<description><![CDATA[Writing web standards is hard. You have to write a formal specification which is useful for machines, humans, and web developers.  I recently stumbled across what I think is a little bug which might be caused by a misreading of the SVG Animation specification.  Here you should see two overlapping circles gradually appear:                                                  If you&#039;re on Chrome, you…]]></description>
										<content:encoded><![CDATA[<p>Writing web standards is hard<sup id="fnref:experience"><a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fn:experience" class="footnote-ref" title="I do have some experience in this matter." role="doc-noteref">0</a></sup>. You have to write a formal specification which is useful for machines, humans, and web developers<sup id="fnref:webdev"><a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fn:webdev" class="footnote-ref" title="Back in 2006, Catharine A. MacKinnon provokatively asked &quot;Are Women Human?&quot;. Her argument (which I shall badly summarise) is that if women were human, then they'd be protected by universal human…" role="doc-noteref">1</a></sup>.</p>

<p>I recently stumbled across what I think is a little bug which <em>might</em> be caused by a misreading of <a href="https://svgwg.org/specs/animations/#KeyTimesAttribute">the SVG Animation specification</a>.  Here you should see two overlapping circles gradually appear:</p>

<svg width="170" height="170" xmlns="http://www.w3.org/2000/svg">
    <path fill="#2c4169" d="M170 0H0v170h170z"></path>
    <circle r="45" cx="50" cy="50" fill="#e4da2e" opacity="0">
        <animate attributeName="opacity" begin="0s" dur="30s" values="0;  1;" keyTimes="0;  1" fill="freeze"></animate>
    </circle>
    <circle r="45" cx="80" cy="80" fill="red" opacity="0">
        <animate attributeName="opacity" begin="0s" dur="30s" values="0;  1;" keyTimes="0;  1;" fill="freeze"></animate>
      </circle>
</svg>

<p>If you're on Chrome, you might only see one circle animate. Why? Bloody semicolons! The bane of every programmer's existence<sup id="fnref:eng"><a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fn:eng" class="footnote-ref" title="I imagine English literature students also find them confusing; everyone does." role="doc-noteref">2</a></sup>.</p>

<p>The <a href="https://svgwg.org/specs/animations/#KeyTimesAttribute">specification for SVG Animation</a> has this text for human readers:</p>

<blockquote><p><strong>keyTimes</strong></p>

<p>A semicolon-separated list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the ‘values’ attribute list, and defines when the value is used in the animation function.</p>

<p>[…]</p>

<p>If the last semicolon separator is followed by either just white space or no more characters, ignore both the separator and the trailing white space.</p></blockquote>

<p>To me, that isn't ambiguous. The text <code>keyTimes="0; 1;"</code> has a final semicolon with nothing after it. Therefore it should be ignored. Instead, Chrome throws an hissyfit and says <code>Error: &lt;animate&gt; attribute keyTimes: Invalid value, "0; 1;".</code></p>

<p>But maybe the humans who wrote the description were sloppy. There's also a machine-readable formal specification. It defines the acceptable sequence as being:</p>

<p><code>&lt;number&gt; [; &lt;number&gt;]* ;?</code></p>

<p>This isn't quite Backus–Naur form<sup id="fnref:bnf"><a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fn:bnf" class="footnote-ref" title="Also the bane of programmers everywhere!" role="doc-noteref">3</a></sup>, but rather <a href="https://www.w3.org/TR/css-values/#value-defs">CSS Values</a>.</p>

<ul>
<li>The <code>&lt;number&gt;</code> is a <a href="https://www.w3.org/TR/css-values/#component-types">component</a>.</li>
<li>The <code>[</code> and <code>]</code> are <a href="https://www.w3.org/TR/css-values/#component-combinators">grouping combinators</a>.</li>
<li>The <code>*</code> and <code>?</code> are <a href="https://www.w3.org/TR/css-values/#component-multipliers">component multipliers</a>

<ul>
<li><code>*</code> "indicates that the preceding type, word, or group occurs zero or more times."</li>
<li><code>?</code> "indicates that the preceding type, word, or group is optional (occurs zero or one times)."</li>
</ul></li>
<li>The <code>;</code> is just a semicolon<sup id="fnref:cig"><a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fn:cig" class="footnote-ref" title="Just like how sometimes a cigar is just a cigar." role="doc-noteref">4</a></sup>.</li>
</ul>

<p>Reading the definition tells us that a valid value will be a number, followed by zero-or-more groups of "semicolon and another number" with an optional final semicolon.</p>

<p>So, based on my reading, I think Chrome is wrong to throw an error here. Both Firefox and Safari work with a trailing semicolon.</p>

<p>Accordingly, I've <a href="https://issues.chromium.org/issues/427020732">raised a bug with the Chromium team</a>.  If you think I have erred in this matter, please let me know.</p>

<div id="footnotes" role="doc-endnotes">
<hr aria-label="Footnotes">
<ol start="0">

<li id="fn:experience">
<p>I do have <a href="https://www.w3.org/TR/2018/WD-html53-20180426/">some experience in this matter</a>.&nbsp;<a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fnref:experience" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>

<li id="fn:webdev">
<p>Back in 2006, Catharine A. MacKinnon provokatively asked "<a href="https://doi.org/10.2307/j.ctvjnrvck">Are Women Human?</a>". Her argument (which I shall badly summarise) is that if women <em>were</em> human, then they'd be protected by universal human rights. Given the state of the world then (and now) it is hard to argue that women receive as great a level of attention as the <a href="https://www.the-tls.com/politics-society/rights-equality/default-male">default male</a>. I don't intend to trivialise MacKinnon's work - but I do find it interesting that developers are often treated separately from other humans.&nbsp;<a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fnref:webdev" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>

<li id="fn:eng">
<p>I imagine English literature students also find them confusing; everyone does.&nbsp;<a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fnref:eng" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>

<li id="fn:bnf">
<p>Also the bane of programmers everywhere!&nbsp;<a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fnref:bnf" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>

<li id="fn:cig">
<p>Just like how <a href="https://quoteinvestigator.com/2011/08/12/just-a-cigar/">sometimes a cigar is just a cigar</a>.&nbsp;<a href="https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/#fnref:cig" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>

</ol>
</div>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=61537&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-bug-in-chrome/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title><![CDATA[RTL Bugs]]></title>
		<link>https://shkspr.mobi/blog/2014/02/rtl-bugs/</link>
					<comments>https://shkspr.mobi/blog/2014/02/rtl-bugs/#respond</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Mon, 24 Feb 2014 12:02:16 +0000</pubDate>
				<category><![CDATA[linux]]></category>
		<category><![CDATA[bugs]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[chromium]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[unicode]]></category>
		<guid isPermaLink="false">http://shkspr.mobi/blog/?p=9988</guid>

					<description><![CDATA[Take a look at the following text, looks normal enough doesn&#039;t it?  &#34;Harry ‮&#34;.draziw a si ‭Potter  Now, try to select the text and see what happens.  WHAT WITCHCRAFT IS THIS?!  If you examine the source code for this page, you&#039;ll see that I&#039;m using the Unicode Bi-Directional characters.  &#34;Harry &#38;#x202e;&#34;.draziw a si &#38;#8237;Potter  These characters are useful when writing text that includes, say, E…]]></description>
										<content:encoded><![CDATA[<p>Take a look at the following text, looks normal enough doesn't it?</p>

<h2 id="harry-draziw-a-si-potter"><a href="https://shkspr.mobi/blog/2014/02/rtl-bugs/#harry-draziw-a-si-potter">"Harry ‮".draziw a si ‭Potter</a></h2>

<p>Now, try to select the text and see what happens.</p>

<p>WHAT WITCHCRAFT IS THIS?!</p>

<p>If you examine the source code for this page, you'll see that I'm using the <a href="https://en.wikipedia.org/wiki/Unicode_character_property#Bidirectional_writing">Unicode Bi-Directional characters</a>.</p>

<pre>"Harry &amp;#x202e;".draziw a si &amp;#8237;Potter</pre>

<p>These characters are useful when writing text that includes, say, English and Arabic - but <a href="http://krebsonsecurity.com/2011/09/right-to-left-override-aids-email-attacks/">they can also be used for malicious purposes</a>.</p>

<p>On a more mundane level, they can cause all sorts of UI bugs.  I've just <a href="http://code.google.com/p/chromium/issues/detail?id=345691">filed a bug against the Chrome browser for how it handles these characters</a>.</p>

<p>If you right click on text with mixed direction, you'll notice that the UI behaves oddly.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/Chrome-RTL-fs8.png" alt="Chrome RTL-fs8" width="480" height="330" class="aligncenter size-full wp-image-9996">

<p>In Firefox, the behaviour is correct - although one could argue whether "Potter" ought to be reversed.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/Firefox-RTL-fs8.png" alt="Firefox RTL-fs8" width="480" height="430" class="aligncenter size-full wp-image-9995">

<h2 id="searching"><a href="https://shkspr.mobi/blog/2014/02/rtl-bugs/#searching">Searching</a></h2>

<p>So, what happens when we run these searches?</p>

<p><img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/Chromium-RTL-Search-fs8.png" alt="Chromium RTL Search-fs8" width="640" height="165" class="aligncenter size-full wp-image-9999"><br>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/Firefox-RTL-Search-fs8.png" alt="Firefox RTL Search-fs8" width="640" height="165" class="aligncenter size-full wp-image-9998"></p>

<p>Neither Firefox nor Chrome do particularly well.  I'm not sure if the reversed text in the window title and URL bar are bugs in Ubuntu - or whether it's the fault of the app itself.</p>

<p>On Windows and Mac, we see this happen:</p>

<p><img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/Safari-RTL-fs8.png" alt="Safari RTL-fs8" width="818" height="155" class="aligncenter size-full wp-image-10002"><br>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2014/02/IE-RTL-fs8.png" alt="IE RTL-fs8" width="606" height="145" class="aligncenter size-full wp-image-10003"></p>

<p>This would suggest that Google isn't correcting the direction of the text and that is deforming its own title tags.</p>

<h2 id="are-these-bugs"><a href="https://shkspr.mobi/blog/2014/02/rtl-bugs/#are-these-bugs">Are These Bugs?</a></h2>

<p>Ok, so having the title reversed isn't the worst problem in the world.  But do these examples count as bugs and, if so, who is responsible for them?</p>

<p>Every search engine I tried passed through the right-to-left-over-ride unscathed - so that's the fault of the search engine, right?  How the hell do you a report a bug to Google?</p>

<p>The title bar could either be a problem with the browser - <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814030">Firefox has a bug report over a year old on the issue</a> - or the problem could be with the underlying operating system.  How would one find out?</p>

<h2 id="thanks"><a href="https://shkspr.mobi/blog/2014/02/rtl-bugs/#thanks">Thanks</a></h2>

<p>Thanks to <a href="https://www.linkedin.com/in/yuanphoon/">Yuan Phoon</a> for asking the questions which prompted this discovery.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=9988&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2014/02/rtl-bugs/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
