We Keep Coding

Fullscreen <canvas> element on iOS: glitch on scroll

I have a <canvas> element with this CSS:
canvas[resize] {
width: 100%;
height: 100%;
position: fixed;
left: 0; top: 0;
pointer-events: none;
background: black;
}
I display funny stuff behind the actual content on a website. On iOs, the address bar hides on scroll. When it hides, the canvas doesn't fill the entire height anymore for a second or so, which is ugly.
Here is a video. Note that I colored the canvas all black to make the point more clear. Normally the canvas is not just black. Note how the content underneath can be seen at the bottom when the address bar hides.
Of course I tried to make the canvas higher than 100% but this has no effect. Even when I set the height to 1000px (and confirm on the console that $('canvas').height() returns 1000) the same thing happens. It is as if the canvas element isnt rendered outside of the viewport.
I read up on how to force hide/show the address bar so the transition does not happen but it seems that all methods are outdated. Of course I prefer not to influence the address bar's behaviour.
Here is a demo showing the problem. The canvas is not black in this demo, it is the wobbly colored thing in the background.
Any suggestions?

I solved it by
making the canvas higher than the viewport
adding the wonderfully hacky -webkit-transform: translate3d(0, 0, 0);
It now looks like this:
canvas[resize] {
-webkit-transform: translate3d(0, 0, 0);
width: 100%;
height: 115%; // Higher than the viewport
position: fixed;
left: 0; top: 0;
pointer-events: none;
background: black;
}

Automatically scale (resize) image in an iframe

In Firefox, when loading an image into an iframe, the image will automatically be scaled down to fit (if it's too big). (This is a Firefox feature that can be disabled via the Firefox setting browser.enable_automatic_image_resizing.)
I'd like to set up my pages so that they have the same behavior when viewed with other browsers such as Chrome and Internet Explorer.
Here's an example, take a look at it with Chrome or IE and compare it with Firefox: http://codepen.io/anon/pen/KddKQX
Here's the code:
<iframe frameborder='0' scrolling='no' src='http://ibin.co/2F6DxpSecv9h' height='600px' width='400px'>
</iframe>

Okay so the following code pen should be a good jumping off point:
http://codepen.io/anon/pen/OyRgmw
I am running short on time, otherwise, I would perfect the scaling/sizing.
Anyways, as you can see, I wrapped the iframe in a div:
<div class="wrap">
This version works on FF 26, Chrome 32, Opera 18, and IE 9-11.
<iframe class="frame" src="http://ibin.co/2F6DxpSecv9h"></iframe>
</div>
Then you set the div to the desired width and height - once you have this, you set your iframe to "Transform: scale" which will shrink the iframe, which is why you need to set the Width and Height to a multiple of the Scale. For example, you set the Width and the Height to 400px by 600px - since the image is being scaled(.25), you are going to want to multiply your frame dimensions by 4 - the following CSS will achieve the desired effect:
.wrap {
width: 400px;
height: 600px;
padding: 0;
overflow: hidden;
}
.frame {
width: 1200px;
height: 1800px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
So like I said, it isn't 100% complete but you should be able to tweak the numbers to achieve what you want. Let me know if you need any clarification or further information.
Here is the codepen link again: http://codepen.io/anon/pen/OyRgmw

Javascript - Center div horizontal and vertical with pure javascript

I'm trying to center a div horizontally and verticlaly without knowing the height/width. I've achieved it within jquery but am struggling to convert it to pure js as I don't want dependancy.. any ideas?
<script>
$(document).ready(mt);
$(window).resize(mt);
function mt(){
var contentLocked = $('.lockerPopup').outerHeight();
marginTop = ( $(document).height() - contentLocked ) / 2;
$('.lockerPopup').css({'top': marginTop});}
</script>

Use .offsetWidth and .offsetHeight to get the dimensions of your element and window.innerWidth and window.innerHeight for the dimensions of the window. The rest of the logic is pretty straight forward to center it using .style.top and .style.left.
See http://codepen.io/anon/pen/JYjqWZ
Alternatively, if you want to center multiple things or you don't need it to be positioned absolutely, I would suggest looking into flexbox or use
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
in your CSS to stay away from JS entirely.

you can center by using left 50%; top 50% and -webkit-transform: translate(-50%,50%); (obviously add all of the other versions of webkit transform for cross-browser compatibility.
This will always center the div no matter what its width/height and parent container size.

You don't need javascript for that,
you can do it only using CSS: http://jsfiddle.net/leojavier/gjah19y7/
<div class="container">
<div class="element"><p>test</p></div>
</div>
CSS
html,body{
height:100%;
width:100%;
}
.container {
display:table;
height:100%;
width:100%;
background:#CCC;
}
.element {
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:100px;
color:#222;
}

Position fixed within container element instead of the browser / viewport

I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that
position:fixed
fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.
See this fiddle demo
So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've commented out a block of css:
.container{
/*-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.
Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!

CSS can't do this by itself.
Position: fixed works in relation to the viewport, not it's containing element.
I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment to my first answer) it doesn't seem to work.
I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:
Positioning an element inside another element with the positioned element fixed along the x and y axes (i.e. position fixed horizontally and vertically).
http://jsfiddle.net/8086p69z/8/
HTML
<div class="moving-article">
<div class="container">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>SCROLL</li>
<li>SCROLL</li>
<li>SCROLL</li>
</ul>
</div>
</div>
CSS (relevant section)
.moving-article {
height: 150px;
width: 75%;
overflow-x: scroll;
}
.fixed-header {
background: rgba(0,0,0,0.5);
width: 50%;
text-align: center;
line-height: 40px;
position: absolute;
top: 0;
left: 0;
}
.container{
width: 1000px;
}
jQuery
var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
$('.fixed-header').css({
'left': $(this).scrollLeft() + leftOffset
});
});

set the header's position to 'absolute', and it's parent container (which you want it to be relative to) to 'relative', and set it to stick to the top of the parent with 'top: 0'
CSS:
.container {
position: relative;
}
.child {
position: absolute;
top: 0;
}

To keep an element fixed within a parent cannot be done with position: fixed because position: fixed takes the element out of the flow and therefore it has no parent. It positions itself relative to the viewport.
To accomplish your goal, while keeping things simple and efficient, you may want to consider Tether, "a client-side library to make absolutely positioned elements attach to elements in the page efficiently".
Hope this helps. Good luck.

In javascript, or with a jQuery plugin, to completely scale a div and its contents?

I'm looking to achieve an effect as seen on the metalabs site's image changer/slider:
http://metalabdesign.com/
I got it working, but the catch is that I'm not using images, I'm scaling a div with content inside it. Dynamic content that's subject to change. Is there a way I can just blow up the whole div and its contents, because manually scaling each element inside the div is a huge hassle.
I'm currently scaling a div with a jQuery animation:
Starting css:
#tagBox {
display: none;
width: 1280px;
height: 1000px;
position: absolute !important;
left: 50% !important;
margin-left: -640px;
top: 50% !important;
margin-top: -500px;
opacity: 0;
}
The jQuery that changes it.
$('#tagBox').show().animate({
opacity: 1,
width: 700,
height: 500,
marginLeft: '+=275px',
marginTop: '+=250px'
}
But that only animated the div. The div's contents stay fixed in the upper right corner. I'm looking for a way to imitate the animation, but just scale the div as a whole, all elements together, preferably in normal javascript.
Thanks!

you can use css3 transformations.
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
Check It - http://jsfiddle.net/6gJka/2/.