CSS Transform-Origin Center Overflow Scroll Not Full Width - css

Question

I've searched and can't find a solution or even ideas on this.
We have a child element inside a scrollable parent. We transform the child to scale larger. When the transform-origin is top left the overflow: scroll works correctly and you can scroll the entire thing. When the transform-origin is center top it scales but the overflow: scroll only starts from the mid-point and there's no way to scroll to the first half of the child.
Here's a simple example showing how it works:
.wrapper {
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid #888;
overflow: auto;
position: relative;
border-radius: 0.001px;
}
.scale {
border-radius: 0.001px;
position: relative;
background-color: #ffff88;
transform: scale(1);
transform-origin: center top;
transition: all 0.5s ease-in-out;
}
.scale--2{
transform-origin: top left;
}
.scale {
transform: scale(4);
}
<div class="wrapper">
<div class="scale">First text - I'm scaling center top</div>
</div>
<div class="wrapper">
<div class="scale scale--2">First text - I'm scaling top left</div>
</div>
Any thoughts or hacks at this point would be awesome.

Answer 1

CSS3 transform has nothing to do with your issue ← you can replicate the same by using a simple left: -100px; on a standard (wider) child element.
(depending on text-direction) If you offset left an element out of a parent boundary - the browser will not paint for you the scrollbars - such element will simply be eaten by the overflow-scroll parent edge.
In the case the child is wider - the browser will paint UI scrollbars
But if you move that wide child to negative left... read again point 1.
the case can be expressed as scrollWidth = childWidth - eatenLeftPortion
Therefore
Browser paints the UI scrollbars
CSS cannot move scrollbars.
The browser will not paint scrollbars if an element is pushed negative top or left (in text-direction ltr; right for rtl)
solution
scale your element using transform-origin: top left; (your second example)
(now the scrollbar is in it's full scrollable state since there's no left-eaten portions)
using JavaScript animate or move scrollLeft by (parentScrollWidth -
parentWidth) / 2
var parent = document.querySelector('.wrapper');
parent.scrollLeft = (parent.scrollWidth - parent.clientWidth) / 2 ;
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
.wrapper {
position: relative;
overflow: auto;
width: 200px;
height: 140px;
border: 1px solid #888;
}
.scale {
position: relative;
background-color: #ffff88;
transform-origin: left top;
transform: scale(4);
}
<div class="wrapper">
<div class="scale">I'm scaling center top</div>
</div>

Answer 2

For centering a child element within a parent div with parent scrollbars reflecting centered position of child element, I use the following code handled by a range input:
var scaleValue = $('#mySliderRange').val();
// Handles child scaling
child.css({'width':scaleValue+'%','height':scaleValue+'%'});
// Keeps child in vertical middle position
parent.scrollTop((child.height() - parent.height())/2);
// Keeps child in horizontal middle position
parent.scrollLeft((child.width() - parent.width())/2);
The above setup is a substitution to the issue of unreliable parent scrollbar positioning when dealing with CSS3 centered scaling. Hope this helps.