how to isolate firefox 17 rendering bug [closed]

Question

I have a curious little bug in some HTML that only show up in Firefox 17 (OSX 10.8.2, no other OS tested yet). I have a 'sidebar' css class that encloses some text which is a repeating element on a number of pages. On one page (only) this text renders as if it has its css visiblility property set to 'hidden' (it does not display, but leaves the correct space around itself).

^{left Firefox 16.0.2; right Firefox 17.0.1}

Here is the css class:

.sidebar {
      position:fixed; 
      top: 2px;
      left:4px;
      display:table-cell; 
      vertical-align:bottom;
      z-index: 2;
      width: 700px;
      height: 64px;
      -webkit-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -o-transform:      rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -ms-transform:     rotate(90deg) translateX(320px) translateY(340px) scale(1);
      transform:         rotate(90deg) translateX(320px) translateY(340px) scale(1);      
}

The affected HTML:

<div class="sidebar" >
    <span class="TMUP1">
        <a href="/">Section_Header</a>
    </span> 
    <span class="sidebarcontents" style="vertical-align: 50%">
        Subsection_Header
    </span>
</div>

All pages on the site contain an identical piece of google analytics asynchronous tracking javascript. If I remove this code, the bug disappears. I have checked the code and it is correct. It is used on every page in the site, and all other pages, with the SAME html (it's a repeating header) render fine

The google js code:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-000000-0']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

The bug disappears under any of the following conditions
- viewed in firefox 16 (same user settings and plugins), or any other browser.
- viewed in firefox 17 / safe mode
- remove the google analytics code
- replace the following line from the 'sidebar' class css

 -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);

with

 -moz-transform:    translateX(320px) translateY(340px) scale(1);

(i.e remove the rotation)

It has nothing to do with plugins and addons, as if I manually disable all of these the bug is still evident.

Other pages with the same HTML, same css and the same google analytics code render fine.

The problem page is the largest on the site (~10KB of optimised/gzipped html with around 160 small images / 880KB to load), all other pages are smaller.

The body is almost entirely made up of 160 repeats of this element

<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
    <a href='/artists/artist_name/'>
    <img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
    </a>
<div class="short_caption">
    <a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>

If I drastically cut the number of these elements down this also fixes the bug.

Any ideas how to further isolate/fix the bug? At the moment it seems like i'd have to either sacrifice analytics or redesign the site, both of which seem a little excessive.

update

I've done a lot more investigating, and got it down to this.

• it's nothing to do with the google javascript. ANY script, even an empty <script></script> will invoke the bug.
• I am using custom fonts with @font-face pulled in from a linked stylesheet.
  • If i only use system fonts, the bug disappears.
  • if I move the @font-face rules from a linked stylesheet into the page header the bug becomes more resilient: it shows up regardless of the presence of script tags
• turn off hardware acceleration, the bug disappears.
• remove rotation from the transform, the bug disappears.
• reduce the page size (from 160 images to around 10) and the bug disappears.
• Firefox nightly (v20) does not show the bug so whatever is causing it is fixed in some future version after v17.0.1

Here are some sample pages showing the issue (I'd avoided them in the original question as I guess that linking is a little frowned upon here). Browser cache needs to be emptied between each page view to gauge the bug effect accurately

• original page bug present
• test page bug present
  • simplified html and minimised css to isolate the bug
  • no javascript but one empty <script></script> tag

These samples are all derived from the test page:

• <script></script> tag removed bug absent
• rotation removed from transform bug absent
• page size reduced from 160 to 18 images bug absent
• no custom fonts bug absent
• internal stylesheet for custom fonts bug present
  • this is a weird one. If the @font_face stylesheet is external, the bug only shows if a <script></script> tag is present. If the @font_face rules are moved to an internal stylesheet, the bug is also evident in the absence of <script></script> tags.

I can't seem to eliminate the bug without changing the design of the page to such a degree I'd have to redesign the site which seems a little OTT for one version of one browser. I am hoping for a more practical workaround. I tried using jQuery browser sniffing but as javascript seems to introduce the bug that's a non-starter.

update 2

Now I have had a chance to test on a different machine, and find the bug is manifest very rarely. Testing as a new user on the original machine doesn't display the bug at all. So it is clearly something to do with user settings and - hopefully then - fairly rare.

update 3

Following a suggestion by @Boris, I have tried incremental rotation to see where and how the page is breaking up. It is fine from rotate(0deg) until about 80deg, after which it starts to fall apart. I've added 1px borders to all elements to help isolate the issue...

• sample pages showing 0-90deg (they should bounce from one to the next on auto refresh).
  This is using -moz-transform so only worth looking at in Firefox.
• animation: this is the result I am getting in firefox 17.0.1

update 4

answering some suggestions from @arttronics - here is a 3d firefox view showing how it should stack up (when I switch to 3d view, the bug disappears, as if Firefox is trying just that little bit harder to do the right thing).

• the protuding content seen in the 3D view is for text alignment, it does not affect the bug - see this cut-down version;
• zoom is reset, no change;
• a new user profile exhibits same behaviour.

update 5 – reset Firefox

After performing a Firefox reset (as per @arttronics' answer) the bug is still here, albeit perhaps a little less resilient.

Prior to reset this would invoke the bug
- clear the cache
- refresh the page

Post-reset, clearing the cache and refreshing brings up the bug about 50% of the time. If I clear the cache, restart firefox, return to the page - it is still there, every time.

---

Ok I'm going to answer my own question ... I have not found a solution, but thanks to the interest and amazing efforts of the stack overflow community it seems fairly clear to me that...

• this may be an issue that is very hard to replicate beyond the peculiarities of my user setup
• it's an obscure bug only manifest in Firefox 17.0.1 and apparently fixed in Firefox 18
• there is no workaround that doesn't involve a site redesign

Therefore, in the interests of moving on with other issues, I suggest we put this question to rest! Thanks to everyone who made comments and suggestions, it's been a very educational process.

Answer 1

Reset Firefox

Based on your detailed question and the resulting comments, this particular bug is only unique to you, and under certain conditions (new OS User Profile has no issues while new Firefox User Profile has issues).

It's then time to Reset Firefox. Just follow these simple steps and your v17.0.1 should be back to normal. If you have multiple profiles for your Firefox installation, then follow these other steps instead.

NOTE: When using the reset feature, your bookmarks, browsing history, passwords, cookies and web form auto-fill information will be saved. However, your extensions and themes will be removed; open tabs, windows and tab groups will not be saved; and your preferences will be reset.

---

EDIT: Per my comments written the other day:

As of yet I did not see anybody reply that they too see this logo sinkhole issue, but at lease Firefox 18 ETA is in 3 weeks as of this comment.

Having said that, the solution may be just to wait until Firefox 18 is released.