We Keep Coding

MouseEvent.clientX and MouseEvent.clientY Unexpected Results With CSS Scale Transform

$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
I was just wondering why the scaled div returns x and y MouseEvent coordinates in the range from 0 to 150 instead of from 0 to 200? The scale property is set to 2, so I thought it would be the second range instead of the first. Could someone explain? Here's a link to the js fiddle page.
I noticed a lot of similar questions on Stackoverflow, so this might be a duplicate. However, I couldn't find anything that specifically asked this question about pixels, coordinates, and the scale transformation in CSS. I may have missed something, though...
Thanks!

because transform-origin is center by default so half the div is outside the screen from the top/left.
Either update the transform-origin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
transform-origin:0 0;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>
Or add some margin:
$('body').on('mousemove', function (ev) {
$('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})
body {
padding: 0;
margin: 0;
}
div {
display: inline-block;
width: 100px;
height: 100px;
background: #333;
transform: scale(2, 2);
margin:50px;
}
span {
position: absolute;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

The div is scaled relative to its center, so part of it ends up being off screen. (One way to notice this: add a border to the div and see that it doesn't go all the way around.)
Try using transform-origin: top left; on the div - I think that will do what you expect.

Is there a way to apply CSS-transform to an element which is inside an element that is being CSS-transformed on mousemove?

Basically I have a parallax scene using parallax.js library.
Inside the scene I have a couple of divs with unique parallax settings data tags.
And inside one of these divs I have an element which I want apply tilt effect to(when its getting mouseover'ed). But it doesnt work, the transformations from tilt lib arent being applied if an element is inside the scene however it works if I move it out of the parallax scene.
I think the problem lies somewhere around the management of OnMouseMove events or maybe it cannot work that way(when transform is being applied to an already transformed element's child).
Chrome EventListeners tab shows that both parallax and tilt mousemove listeners exist.
I would appreciate any help. If you need any code snippets I can provide it, since right now I actually don't know what particular parts to show and dont want to copy paste the whole libs.
UPD.
here's a snippet of what im trying to do:
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});
.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt#1.6.1/lib/vanilla-tilt.min.js"></script>
</body>

Found out that parallax scene disables pointer events.
So in order for that to work I needed to add style="pointer-events: all;" to an element that is being tilted.

Wordpress page lagging

Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.
Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/
Any help is greatly appreciated!

You issue is background-attachment
Chris Ruppel writes:
[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.
The culprit is your header background image.
it is fixed and is consistently getting repainted on scroll behind your page content.
In you CSS file you have this
.section-parallax {
background-attachment: fixed;
}
If you remove that then you smooth scrolling without trouble but you loose the parallax effect.
If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.
for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:
/*
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function() {
$(window).scroll(function(e) {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
$('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
$('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
}
});
body {
background: rgba(230, 231, 232, 1);
height: 4600px;
}
/* foreground (balloons/landscape)*/
div#parallax-bg-1 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3 {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div {
background-repeat: no-repeat;
position: absolute;
display: block;
overflow: hidden;
}
div#bg-3-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
width: 529px;
height: 757px;
top: -100px;
right: 100px;
}
div#bg-3-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
width: 603px;
height: 583px;
top: 1050px;
right: 70px;
}
div#bg-3-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
width: 446px;
height: 713px;
top: 1800px;
right: 140px;
}
div#bg-3-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
width: 1104px;
height: 684px;
top: 2800px;
right: 0px;
}
/* middle layer clouds */
div#parallax-bg-2 div {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-2-1 {
top: 100px;
left: -310px;
}
div#bg-2-2 {
top: 270px;
right: -70px;
}
div#bg-2-3 {
top: 870px;
left: -300px;
}
div#bg-2-4 {
top: 1120px;
right: -130px;
}
div#bg-2-5 {
top: 1620px;
left: 140px;
}
div#bg-2-6 {
top: 720px;
left: 340px;
}
/*background layer clouds */
div#parallax-bg-1 div {
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-1-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 200px;
right: 450px;
}
div#bg-1-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 420px;
left: 0px;
}
div#bg-1-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 850px;
right: -290px;
}
div#bg-1-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 1350px;
left: 200px;
}
div#bg-1-5 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 1200px;
left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="parallax-bg-3" class="parallax-bg">
<div id="bg-3-1"></div>
<div id="bg-3-2"></div>
<div id="bg-3-3"></div>
<div id="bg-3-4"></div>
</div>
<div id="parallax-bg-2" class="parallax-bg">
<div id="bg-2-1"></div>
<div id="bg-2-2"></div>
<div id="bg-2-3"></div>
<div id="bg-2-4"></div>
<div id="bg-2-5"></div>
<div id="bg-2-6"></div>
</div>
<div id="parallax-bg-1" class="parallax-bg">
<div id="bg-1-1"></div>
<div id="bg-1-2"></div>
<div id="bg-1-3"></div>
<div id="bg-1-4"></div>
<div id="bg-1-5"></div>
</div>
</body>
</html>
In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so
.element {
position: relative;
}
.elemnt:before {
content: ' ';
position: fixed; /* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; /* creates a new paint layer */
z-index: -1;
}
And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.
Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.
Resources:
https://www.w3.org/TR/css-will-change-1/
http://caniuse.com/#feat=will-change
https://www.youtube.com/watch?v=QU1JAW5LRKU
https://developers.google.com/web/tools/chrome-devtools/

From looking at your site, there are a few parts of it that are slowing down the rest. Here are a few easy ways to speed it up.
Use a CDN
A CDN (Content Distribution Network) ensures that everything is loaded faster because it doesn't depend on your own Wordpress server and will allow access times to be consistent across the world. There are a few good ones out there like CloudFlare and Incapsula. Here is an article listing a few more.
In addition, you can host your images (I see that one is coming from Wikipedia) on a slightly faster
Compress images
This step is as easy as converting photos to a .jpg. JPEG automatically compresses the data by getting rid of unnecessary information in the photos. You can also use compression software to get the file size down.
Leverage caching
Use a caching plugin (there are tons of great ones for Wordpress) to cache data on your server and can really speed up things for your site.
Search for more ways to optimize
Use tools like Pingdom and Google PageSpeed Insights to identify bottlenecks and resolve them.
Hope this helps you!

Show div expanding out from middle out in jquery

I want to show my div when the user generates the trigger. The animation which I want to use showing the div is such that the div is rendered starting from its centre and then gaining its height by expanding in both directions(up and down) gradually. Here is the snippet of what I have tried. The div starts rendering from left. What I want is it starts rendering from middle of its height.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

You could animate the margin as well to achieve this effect.
Set the initial margin-top and margin-bottom half of the final height; and margin-left and margin-right half of the final width. Then when you increase the width and height, decrease the margin as well.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
margin: '0'
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0px;
margin: 100px 365px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

I divided the width and height by four to and added that to the left and top to obtain the center animation requested.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
left: "0px",
top: "0px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
left: 182px;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>

You need to position the element in the middle from the beginning. I'm setting the left absolute position to 50%, then moving the element back -50% of itself so that it is in the middle.
Check out CSS transform:
http://css-tricks.com/almanac/properties/t/transform/
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
******UPDATE******
Here is the css to run the animation from the middle of the window's height:
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
top: 50%;
transform: translateY(-50%);
}

jQuery Help - Appear underneath rather than on top

I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?

Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.

Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.