<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Bug-Fixes on Damian Galarza | Software Engineering &amp; AI Consulting</title><link>https://www.damiangalarza.com/tags/bug-fixes/</link><description>Recent posts from Damian Galarza | Software Engineering &amp; AI Consulting</description><generator>Hugo</generator><language>en-us</language><managingEditor>Damian Galarza</managingEditor><atom:link href="https://www.damiangalarza.com/tags/bug-fixes/feed.xml" rel="self" type="application/rss+xml"/><item><title>FB.ui Dialog Position bug in Webkit</title><link>https://www.damiangalarza.com/posts/2012-06-02-fb-ui-dialog-position-bug-in-webkit/</link><pubDate>Sat, 02 Jun 2012 21:14:30 +0000</pubDate><author>Damian Galarza</author><guid>https://www.damiangalarza.com/posts/2012-06-02-fb-ui-dialog-position-bug-in-webkit/</guid><content:encoded><![CDATA[<p>Recently while working with the Facebook app requests with the Facebook JavaScript SDK I ran into a slight issue when working with long scrolling pages.</p>
<p>By design, the Facebook dialog should open within the middle of the user&rsquo;s screen which works great in Firefox and IE. However due to a bug in webkit (that appears to have been around for some time now) the dialog does not take into account the user&rsquo;s scroll position. This is because webkit always returns 0 when calling document.documentElement.scrollTop no matter where the user has scrolled on the page.</p>
<p>The fix lies within the FB.Dom module, specifically the <a href="https://github.com/facebook/facebook-js-sdk/blob/master/src/common/dom.js#L213-229">getViewportInfo method</a>. Instead of relying on document.documentElement for the scrollTop position in all CSS1Compat browsers that have it, degrade to the document.body if no value is found.</p>
<p>I&rsquo;ve submitted a <a href="https://github.com/facebook/facebook-js-sdk/pull/3">pull request</a> on Facebook&rsquo;s Github repository with a fix but in the meantime if you need to fix this yourself you can overwrite the existing FB.Dom.getViewportInfo method:</p>
<div class="highlight"><pre tabindex="0" style="color:#cdd6f4;background-color:#1e1e2e;-moz-tab-size:2;-o-tab-size:2;tab-size:2;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>FB.Dom.getViewportInfo<span style="color:#89dceb;font-weight:bold">:</span> <span style="color:#f38ba8">function</span>() {
</span></span><span style="display:flex;"><span>	<span style="color:#6c7086;font-style:italic">// W3C compliant, or fallback to body
</span></span></span><span style="display:flex;"><span><span style="color:#6c7086;font-style:italic"></span>	<span style="color:#f38ba8">var</span> root <span style="color:#89dceb;font-weight:bold">=</span> (<span style="color:#89dceb">document</span>.documentElement <span style="color:#89dceb;font-weight:bold">&amp;&amp;</span> <span style="color:#89dceb">document</span>.compatMode <span style="color:#89dceb;font-weight:bold">==</span> <span style="color:#a6e3a1">&#39;CSS1Compat&#39;</span>)
</span></span><span style="display:flex;"><span>	  <span style="color:#89dceb;font-weight:bold">?</span> <span style="color:#89dceb">document</span>.documentElement
</span></span><span style="display:flex;"><span>	  <span style="color:#89dceb;font-weight:bold">:</span> <span style="color:#89dceb">document</span>.body;
</span></span><span style="display:flex;"><span>	<span style="color:#cba6f7">return</span> {
</span></span><span style="display:flex;"><span>	  scrollTop  <span style="color:#89dceb;font-weight:bold">:</span> root.scrollTop <span style="color:#89dceb;font-weight:bold">||</span> <span style="color:#89dceb">document</span>.body.scrollTop,
</span></span><span style="display:flex;"><span>	  scrollLeft <span style="color:#89dceb;font-weight:bold">:</span> root.scrollLeft,
</span></span><span style="display:flex;"><span>	  width      <span style="color:#89dceb;font-weight:bold">:</span> self.innerWidth  <span style="color:#89dceb;font-weight:bold">?</span> self.innerWidth  <span style="color:#89dceb;font-weight:bold">:</span> root.clientWidth,
</span></span><span style="display:flex;"><span>	  height     <span style="color:#89dceb;font-weight:bold">:</span> self.innerHeight <span style="color:#89dceb;font-weight:bold">?</span> self.innerHeight <span style="color:#89dceb;font-weight:bold">:</span> root.clientHeight
</span></span><span style="display:flex;"><span>	};
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div>]]></content:encoded></item></channel></rss>