Skip to content

Instantly share code, notes, and snippets.

@thebenedict
Created June 21, 2015 17:10
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save thebenedict/aa12a139537a97c02719 to your computer and use it in GitHub Desktop.
Debugging google translate widget with position:fixed on ipad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<title>GT Layout Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="content">
<p class="info">This doesn't work, but <a href="index.html">try it without the google translate widget in the footer</a></p>
<p>Hydrogen atoms! The sky calls to us sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, encyclopaedia galactica sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrum exercitationem ullam corporis suscipit laboriosam how far away adipisci velit Flatland, ship of the imagination? Tunguska event, bits of moving fluff. Tesseract quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident! Network of wormholes something incredible is waiting to be known muse about cosmos.</p>
<p>Extraordinary claims require extraordinary evidence at the edge of forever galaxies descended from astronomers corpus callosum, worldlets extraplanetary, trillion. Consciousness network of wormholes tendrils of gossamer clouds muse about how far away Rig Veda across the centuries courage of our questions at the edge of forever totam rem aperiam Cambrian explosion cosmos not a sunrise but a galaxyrise, venture as a patch of light eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit Orion's sword kindling the energy hidden in matter preserve and cherish that pale blue dot cosmic ocean shores of the cosmic ocean realm of the galaxies worldlets.</p>
<p>Cosmos. At the edge of forever, Flatland consectetur a mote of dust suspended in a sunbeam birth. Great turbulent clouds, courage of our questions prime number, concept of the number one! Brain is the seed of intelligence shores of the cosmic ocean explorations light years Orion's sword. Intelligent beings sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrum exercitationem ullam corporis suscipit laboriosam light years something incredible is waiting to be known consciousness.</p>
<p>Rogue! The ash of stellar alchemy! The only home we've ever known! Hypatia from which we spring kindling the energy hidden in matter billions upon billions, inconspicuous motes of rock and gas. Billions upon billions! Concept of the number one explorations Hypatia Rig Veda cosmos, great turbulent clouds a still more glorious dawn awaits another world, dispassionate extraterrestrial observer, shores of the cosmic ocean descended from astronomers Cambrian explosion galaxies cosmic ocean, a mote of dust suspended in a sunbeam rings of Uranus. Citizens of distant epochs consciousness paroxysm of global death hundreds of thousands birth vanquish the impossible Apollonius of Perga a very small stage in a vast cosmic arena, star stuff harvesting star light Orion's sword, light years cosmic ocean?</p>
<p>Of brilliant syntheses consectetur. Two ghostly white figures in coveralls and helmets are soflty dancing Tunguska event? At the edge of forever. Explorations consectetur birth cosmos! Worldlets quis nostrum exercitationem ullam corporis suscipit laboriosam permanence of the stars at the edge of forever tendrils of gossamer clouds, light years, billions upon billions? Orion's sword. Tunguska event. Across the centuries. Descended from astronomers sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Vastness is bearable only through love, trillion consectetur? Consciousness. Hundreds of thousands! Globular star cluster courage of our questions, a still more glorious dawn awaits. Consciousness consectetur two ghostly white figures in coveralls and helmets are soflty dancing bits of moving fluff culture. Drake Equation Apollonius of Perga, how far away paroxysm of global death sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est gathered by gravity nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
<p>Dream of the mind's eye Rig Veda Vangelis brain is the seed of intelligence quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident inconspicuous motes of rock and gas cosmic ocean great turbulent clouds explorations colonies permanence of the stars network of wormholes vanquish the impossible! Two ghostly white figures in coveralls and helmets are soflty dancing rich in mystery? Trillion galaxies, cosmos paroxysm of global death. Ship of the imagination, from which we spring, prime number of brilliant syntheses are creatures of the cosmos, inconspicuous motes of rock and gas Cambrian explosion? Tranquility hydrogen atoms tingling of the spine.</p>
<p>Made in the interiors of collapsing stars intelligent beings. Colonies trillion Drake Equation, a billion trillion vastness is bearable only through love Hypatia quis nostrum exercitationem ullam corporis suscipit laboriosam hydrogen atoms cosmos. Corpus callosum brain is the seed of intelligence Cambrian explosion decipherment emerged into consciousness, Flatland gathered by gravity rogue dream of the mind's eye, network of wormholes. Cosmos circumnavigated extraordinary claims require extraordinary evidence. The sky calls to us great turbulent clouds of brilliant syntheses Apollonius of Perga.</p>
<p>Rich in heavy atoms of brilliant syntheses. Extraordinary claims require extraordinary evidence venture laws of physics. Muse about, venture the carbon in our apple pies Apollonius of Perga, preserve and cherish that pale blue dot dispassionate extraterrestrial observer Flatland quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Concept of the number one, quasar sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam Tunguska event worldlets, with pretty stories for which there's little good evidence made in the interiors of collapsing stars, realm of the galaxies as a patch of light explorations extraordinary claims require extraordinary evidence, permanence of the stars qui dolorem ipsum quia dolor sit amet, made in the interiors of collapsing stars, ship of the imagination! The sky calls to us concept of the number one Vangelis?</p>
<p>Rig Veda permanence of the stars, with pretty stories for which there's little good evidence totam rem aperiam take root and flourish? Something incredible is waiting to be known Sea of Tranquility finite but unbounded, a very small stage in a vast cosmic arena, the sky calls to us. A still more glorious dawn awaits nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur rich in mystery Euclid consectetur adipisicing elit, colonies inconspicuous motes of rock and gas, concept of the number one, billions upon billions qui dolorem ipsum quia dolor sit amet, dream of the mind's eye finite but unbounded and billions upon billions upon billions upon billions upon billions upon billions upon billions?</p>
<div class="footer">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<span>hello from the footer</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<title>GT Layout Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="content">
<p class="info">This works, but <a href="index-gt.html">try it on an iPad with the google translate widget in the footer</a></p>
<p>Hydrogen atoms! The sky calls to us sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, encyclopaedia galactica sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrum exercitationem ullam corporis suscipit laboriosam how far away adipisci velit Flatland, ship of the imagination? Tunguska event, bits of moving fluff. Tesseract quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident! Network of wormholes something incredible is waiting to be known muse about cosmos.</p>
<p>Extraordinary claims require extraordinary evidence at the edge of forever galaxies descended from astronomers corpus callosum, worldlets extraplanetary, trillion. Consciousness network of wormholes tendrils of gossamer clouds muse about how far away Rig Veda across the centuries courage of our questions at the edge of forever totam rem aperiam Cambrian explosion cosmos not a sunrise but a galaxyrise, venture as a patch of light eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit Orion's sword kindling the energy hidden in matter preserve and cherish that pale blue dot cosmic ocean shores of the cosmic ocean realm of the galaxies worldlets.</p>
<p>Cosmos. At the edge of forever, Flatland consectetur a mote of dust suspended in a sunbeam birth. Great turbulent clouds, courage of our questions prime number, concept of the number one! Brain is the seed of intelligence shores of the cosmic ocean explorations light years Orion's sword. Intelligent beings sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrum exercitationem ullam corporis suscipit laboriosam light years something incredible is waiting to be known consciousness.</p>
<p>Rogue! The ash of stellar alchemy! The only home we've ever known! Hypatia from which we spring kindling the energy hidden in matter billions upon billions, inconspicuous motes of rock and gas. Billions upon billions! Concept of the number one explorations Hypatia Rig Veda cosmos, great turbulent clouds a still more glorious dawn awaits another world, dispassionate extraterrestrial observer, shores of the cosmic ocean descended from astronomers Cambrian explosion galaxies cosmic ocean, a mote of dust suspended in a sunbeam rings of Uranus. Citizens of distant epochs consciousness paroxysm of global death hundreds of thousands birth vanquish the impossible Apollonius of Perga a very small stage in a vast cosmic arena, star stuff harvesting star light Orion's sword, light years cosmic ocean?</p>
<p>Of brilliant syntheses consectetur. Two ghostly white figures in coveralls and helmets are soflty dancing Tunguska event? At the edge of forever. Explorations consectetur birth cosmos! Worldlets quis nostrum exercitationem ullam corporis suscipit laboriosam permanence of the stars at the edge of forever tendrils of gossamer clouds, light years, billions upon billions? Orion's sword. Tunguska event. Across the centuries. Descended from astronomers sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Vastness is bearable only through love, trillion consectetur? Consciousness. Hundreds of thousands! Globular star cluster courage of our questions, a still more glorious dawn awaits. Consciousness consectetur two ghostly white figures in coveralls and helmets are soflty dancing bits of moving fluff culture. Drake Equation Apollonius of Perga, how far away paroxysm of global death sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est gathered by gravity nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
<p>Dream of the mind's eye Rig Veda Vangelis brain is the seed of intelligence quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident inconspicuous motes of rock and gas cosmic ocean great turbulent clouds explorations colonies permanence of the stars network of wormholes vanquish the impossible! Two ghostly white figures in coveralls and helmets are soflty dancing rich in mystery? Trillion galaxies, cosmos paroxysm of global death. Ship of the imagination, from which we spring, prime number of brilliant syntheses are creatures of the cosmos, inconspicuous motes of rock and gas Cambrian explosion? Tranquility hydrogen atoms tingling of the spine.</p>
<p>Made in the interiors of collapsing stars intelligent beings. Colonies trillion Drake Equation, a billion trillion vastness is bearable only through love Hypatia quis nostrum exercitationem ullam corporis suscipit laboriosam hydrogen atoms cosmos. Corpus callosum brain is the seed of intelligence Cambrian explosion decipherment emerged into consciousness, Flatland gathered by gravity rogue dream of the mind's eye, network of wormholes. Cosmos circumnavigated extraordinary claims require extraordinary evidence. The sky calls to us great turbulent clouds of brilliant syntheses Apollonius of Perga.</p>
<p>Rich in heavy atoms of brilliant syntheses. Extraordinary claims require extraordinary evidence venture laws of physics. Muse about, venture the carbon in our apple pies Apollonius of Perga, preserve and cherish that pale blue dot dispassionate extraterrestrial observer Flatland quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Concept of the number one, quasar sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam Tunguska event worldlets, with pretty stories for which there's little good evidence made in the interiors of collapsing stars, realm of the galaxies as a patch of light explorations extraordinary claims require extraordinary evidence, permanence of the stars qui dolorem ipsum quia dolor sit amet, made in the interiors of collapsing stars, ship of the imagination! The sky calls to us concept of the number one Vangelis?</p>
<p>Rig Veda permanence of the stars, with pretty stories for which there's little good evidence totam rem aperiam take root and flourish? Something incredible is waiting to be known Sea of Tranquility finite but unbounded, a very small stage in a vast cosmic arena, the sky calls to us. A still more glorious dawn awaits nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur rich in mystery Euclid consectetur adipisicing elit, colonies inconspicuous motes of rock and gas, concept of the number one, billions upon billions qui dolorem ipsum quia dolor sit amet, dream of the mind's eye finite but unbounded and billions upon billions upon billions upon billions upon billions upon billions upon billions?</p>
<div class="footer">
<span>hello from the footer</span>
</div>
</div>
</body>
</html>
body {
margin: 0;
}
.content {
height: 100%;
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
font-family: sans-serif;
}
p {
padding: 0 1em;
font-size: 18px;
line-height: 24px;
}
.info { font-weight: 700; }
.footer {
width: 100%;
height: 2em;
float: left;
display: inline-block;
background: tomato;
padding: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment