Skip to content
Snippets Groups Projects
Commit 901744db authored by Vincent Nivoliers's avatar Vincent Nivoliers
Browse files

removing old useless files

parent 75e2d032
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* Wrapper class to trigger the effect */
.trigger {
width : 220px ;
border : 1px solid #000 ;
display : inline-block ;
}
.trigger:hover .container{
left : 200px ;
}
/* Absolutely positionned element */
.container {
position : relative ;
width : 20px ;
height : 20px ;
left : 0px ;
background : #aaa ;
transition : all .25s ease-out ;
}
/* Fixed element inside the absolute one */
.child {
position : fixed ;
width : 20px ;
height : 20px ;
background : #aaa ;
top : 100px ;
}
</style>
</head>
<body>
<!-- Display the bug test result -->
Your brother has the bug : <span id='bug-status'></span><br/><br/>
<div class="trigger">
<!-- Demonstrate the error without any fix -->
<span>Reference</span><br/>
<div class="container">
<div class="child">
</div>
</div>
</div>
</div>
<!-- Apply the fix fix -->
<div class="trigger" id="trigger">
<span>Fixed</span><br/>
<div class="container" id="container">
<div class="child" id="child">
</div>
</div>
</div>
</div>
</body>
<script>
/* Fix to programatically force fixed element repositionning */
var trigger = document.getElementById('trigger') ;
var container = document.getElementById('container') ;
var child = document.getElementById('child') ;
function from_and_back(evt) {
if(container.children.length) {
container.removeChild(child) ;
setTimeout(function() {container.appendChild(child) ;}, 300) ;
}
}
trigger.addEventListener('mouseenter', from_and_back) ;
trigger.addEventListener('mouseleave', from_and_back) ;
/* Simulate the bug to check whether the browser experiences it */
var bug_status = document.getElementById('bug-status') ;
bug_status.innerText = (function() {
//create an absolutely positionned element
var abs = document.createElement('div') ;
abs.style.position = 'relative' ;
abs.style.left = '0px' ;
//create a fixed element to put inside
var fix = document.createElement('div') ;
fix.style.position = 'fixed' ;
//insert it into the document
abs.appendChild(fix) ;
document.body.appendChild(abs) ;
//test
fix.getBoundingClientRect() ;
abs.style.left = '20px' ;
var fix_left = fix.getBoundingClientRect().left ;
var abs_left = abs.getBoundingClientRect().left ;
//remove test elements from the document
document.body.removeChild(abs) ;
//send the result
return abs_left !== fix_left ;
})() ;
</script>
</html>
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment