Skip to content

Instantly share code, notes, and snippets.

@medikoo

medikoo/450418.gecko-bug.html

Created February 18, 2011 14:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save medikoo/833714 to your computer and use it in GitHub Desktop.
Save medikoo/833714 to your computer and use it in GitHub Desktop.
Download ZIP
Firefox (gecko) misaligns absolutely positioned elements, within fieldset that has left or top non zero padding and position set to other than static https://bugzilla.mozilla.org/show_bug.cgi?id=450418
Raw
450418.gecko-bug.html
<!DOCTYPE html>
<title>Gecko 450418 bug</title>
<style>
* { margin: 0; padding: 0; }
fieldset {
width: 200px; height: 200px; background: #ddd; border: 0;
position: relative; padding: 20px;
}
div {
width: 100px; height: 100px; background: red;
position: absolute; top: 0; left: 0;
}
</style>
<fieldset><div></div></fieldset>
<script>
window.onload = function () {
// How to detect this issue (doesn't depend on above html/css):
var fieldset = document.body.appendChild(document.createElement("fieldset"));
fieldset.style.cssText = "padding-left: 1px !important; position: relative !important";
var div = fieldset.appendChild(document.createElement("div"));
div.style.cssText = "position:absolute !important; top: 0 !important; left: 0 !important";
var left = div.getBoundingClientRect().left;
fieldset.style.cssText = "padding-left: 0 !important; position: relative;";
var buggy = left !== div.getBoundingClientRect().left;
document.body.removeChild(fieldset);
document.body.appendChild(document.createElement("p"))
.appendChild(document.createTextNode("RESULT: " + (buggy ? "WRONG" : "OK")));
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment