I have encountered a peculiar bug in my HTML code that specifically appears in Firefox 17 (OSX 10.8.2, other OS not tested). The issue revolves around a 'sidebar' CSS class containing text that is repeated on multiple pages. However, on one particular page, this text seems to be hidden even though its visibility property is not set to 'hidden' (it still occupies space).
left Firefox 16.0.2; right Firefox 17.0.1
Below is the CSS class causing the problem:
.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 snippet:
<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 have the same Google Analytics tracking code. Removing this code resolves the bug. Despite verifying the correctness of the code, the bug persists only on this specific page.
The Google Analytics JavaScript 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>
To troubleshoot the bug further, various conditions were tested. It was observed that the bug disappears when viewed in Firefox 16 or any other browser, in Firefox 17 safe mode, by removing the Google Analytics code, and by modifying the 'sidebar' class CSS by eliminating rotation.
Additional tests revealed...
- The presence of any script, even an empty
<script></script>, triggers the bug. - The use of custom fonts via @font-face impacts the bug occurrence. Using system fonts eliminates the bug.
- Turning off hardware acceleration also eliminates the bug.
- Reducing the number of elements on the page removes the bug.
- The bug is not present in Firefox Nightly version 20.
A series of sample pages demonstrated different scenarios resulting in either bug presence or absence based on specific factors such as scripts, rotations, font styles, and page size.
Despite extensive investigation, no definitive solution has been found. The bug appears to be unique to Firefox 17.0.1 and likely resolved in subsequent versions like Firefox 18. Considering the complexities involved, it may require drastic measures such as redesigning the website to address the issue.
In conclusion, while no concrete resolution has been reached, the insights provided by the community indicate that this may be an isolated issue tied to user settings and browser version compatibility. Moving forward, it may be best to prioritize other tasks and consider this matter closed. Appreciation to all who contributed suggestions and feedback throughout this process.