We Keep Coding

How to superimpose a canvas on an HTML5 video using object-fit cover?

I am refactoring this code: https://github.com/idevelop/predator-vision to superimpose heatmap on a video (with any resolution and aspect-ratio).
I have the following html code:
<div id="videos" class="embed-responsive">
<canvas id="heatmap" class="embed-responsive-item"></canvas>
<video id="remote-video" autoplay muted playsinline class="embed-responsive-item"></video>
</div>
CSS:
#remote-video {
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
/* no letterboxing */
opacity: 1;
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: opacity 1s;
width: 100%;
}
#remote-video.active {
opacity: 1;
}
#heatmap {
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
/* no letterboxing */
opacity: 1;
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: opacity 1s;
width: 100%;
}
#heatmap.active {
opacity: 1;
z-index: 1;
}
#videos {
font-size: 0;
/* to fix whitespace/scrollbars problem */
height: 100%;
pointer-events: none;
position: absolute;
transition: all 1s;
width: 100%;
}
#videos.active {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Javascript:
I am rendering the canvas using:
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
0, 0, canvas.width, canvas.height);
Where canvas.width and canvas.height are initially set from video.offsetWidth and video.offsetHeight respectively.
When I render this code the canvas is not exactly superimposed on the video. I am not sure how to fix this.
Note: Canvas seems to superimpose properly if I use object-fit=fill for the video. But the video is stretched.

Why does iOS Sfari run this CSS transition's multiple transforms one after the other?

This works perfectly in Chrome and smoothly changes the icons, but in iOS Safari (and possibly desktop Safari), it does them in order, waiting till the other is done before doing the next:
Safari Transition:
Does the rotation until complete
Does the translate (x,y)
This makes for a very poor animation. In Chrome it's all done at the same time.
Is there a way to force that in Safari?
https://jsfiddle.net/6nju07s8/
HTML:
<div class="error" id="outer">
<div class="line left">
</div>
<div class="line right">
</div>
</div>
CSS:
#outer,body,html
{
width: 100%;
height: 100%
}
.line {
position: absolute;
top: 50%;
left: 50%;
width: 2.5rem;
height: .375rem;
background-color: red;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
-ms-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
-webkit-transition: transform 250ms;
transition: transform 250ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.line.right {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
-ms-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
.info .line {
width: .375rem;
height: .375rem;
-webkit-transform: translate(-50%,-50%) translateY(-1.0625rem);
-ms-transform: translate(-50%,-50%) translateY(-1.0625rem);
transform: translate(-50%,-50%) translateY(-1.0625rem);
background-color: blue;
}
.info .line.right {
width: 1.75rem;
height: .375rem;
-webkit-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
-ms-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
background-color: blue;
}
JS (optional):
var outer = document.querySelector( "#outer" );
outer.onclick = function()
{
if ( outer.className === "info" ) { outer.className = "error"; }
else outer.className = "info";
}

I see an issue with Safari Desktop. I am not sure if it is the same issue you are speaking of, but when having a transition on transform and width issues arise.
I think the issue has to do with Safari re-positioning the element after the width change. In other browser it seems to happen fluidly, in Safari it is "jerky."
You can see a simplified example of that behaviour here. Unfortunately I don't know exactly why that is occurring, but we can accomplish the same effect by adjusting our approach. That is what I would suggest.
Rather than changing the width value(to avoid the issue in Safari), I used the scaleX(X) property. This will given you a very similar visual affect (adjusting the "height" of the line) and should not introduce the problems. You will have to also edit your top values to re-position the elements after scaling them (or adjust the translate(-50%,Y) value; I prefer using top).
Here's a demo. I also made some QoL markup changes, you will need to prefix everything if you want to use it in production.
$('.box').click(function(){
$(this).toggleClass('info');
});
.parent {
width: 100%;
height: 100vh;
}
.box {
width: 50px;
height: 50px;
background: lightblue;
}
.va {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.line {
display: inline-block;
background: white;
width: 2.5rem;
height: .375rem;
position: absolute;
top: 50%;
left: 50%;
transition: all 250ms;
transform: translate(-50%,-50%) rotate(45deg);
}
.line.right {
background: red;
transform: translate(-50%,-50%) rotate(-45deg);
}
.info .line.left {
top: 20%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.15);
}
.info .line.right {
top: 60%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.65);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent error">
<div class="box va">
<div class="line left"></div>
<div class="line right"></div>
</div>
</div>

Strange css transform animation on MS edge

I made a tile animation to flip my tile with a button.
It's working on Chrome, Safari, but in MS Edge browser, flip animation appear strange.
I just want an y-rotation and not a rotation-like as in Edge.
You can find my code behind and example to show my problem on MS Edge.
Does any one has an idea to fix Edge behaviour ?
EDIT : I suppose it's not a problem with transform-style:preserve-3D compatibility because it's Edge compatible.
document.getElementById("btn-front").addEventListener("click", function(){
document.getElementById("flip").className = "flipped";
});
document.getElementById("btn-back").addEventListener("click", function(){
document.getElementById("flip").className = "";
});
#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}
#front {
background-color: red;
transform: translate3d(0px, 0px, 2px);
}
#back {
background-color: green;
transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
.tile {
height: 200px;
width: 200px;
position: absolute;
top: 50px;
left: 50px;
backface-visibility: hidden;
}
.button {
height: 30px;
width: 100px;
margin: 75px 50px;
}
#flip.flipped {
transform: translate3d(0, 0, 0) rotateY(-180deg);
}
<div id="flip">
<div id="front" class="tile">
<button id="btn-front" class="button">Go to back</button>
</div>
<div id="back" class="tile">
<button id="btn-back" class="button">Go to front</button>
</div>
</div>

The problem is in that block:
#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}
If you change the property transform: "translate3d(0, 0, 0);" to transform: translate3d(0, 0, 1) it will work fine.

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

Load css element already rotated

I'm trying to create an animation using CSS that will pop up and rotate when the page is loaded. The issue I'm having with is, I need the element to be rotated BEFORE the animation begins.
JSFiddle: http://jsfiddle.net/4o1w01q5/
I can't tell if the issue is with this CSS snippet:
.container {
background:red;
background-image: url(img/2012-04-12_14-06-35_758-1.jpg);
background-position: center;
background-repeat: no-repeat;
padding:240px;
padding-left: 300px;
padding-right: 300px;
padding-top:10px;
-webkit-animation: logo-appear 0.6s, logo-rotate 1.6s;
-moz-animation: logo-appear 0.6s, logo-rotate 1.6s;
animation: logo-appear 0.6s, logo-rotate 1.6s;
}
Or if there is a way to set the rotated positiong with jQuery. Any suggestions?
Edit: To clarify, what I'm trying to do is
Have a div load, rotated 45 degrees
Pop the div (logo-appear)
Rotate the div 45 degrees down (logo-rotate)
Why do I want it like this? I want a diamond-shaped element load and the rotate it to make it a square.

Figured it out. It was a matter of having the rotate happen along with the popping up sequence.
JSFiddle: http://jsfiddle.net/s8hae5dz/ with additional animation
Previous example:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
Currently:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5) rotate(-45deg);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
100% {
-webkit-transform: scale(1) rotate(-45deg);
}
}