It's a well-known fact that elements with the CSS property position: fixed don't behave as expected when the container has the transform property applied in CSS.
After searching through various threads, I couldn't find a definitive solution to this issue. I have several elements in my application where I require position:fixed to function properly due to the transform: scale() property being applied to the body itself.
Since no workaround seems to work, I am curious if there is an alternative to using the transform: scale() property in CSS. Using zoom isn't ideal either, especially since it's not fully compatible with many browsers (especially Firefox).
Please provide suggestions on what changes I should make to ensure both functionalities work seamlessly?
angular.element($window).on('resize load', function () {
var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
var oWidth = angular.element($window).width();
var oHeight = angular.element($window).height();
console.log(oWidth + " " + oHeight);
if (oWidth >= 1903)
applyCss(100, 100, 1, isFirefox);
if (oWidth < 1903 && oWidth > 1441)
applyCss(125, 125, 0.8, isFirefox);
if (oWidth <= 1441 && oWidth > 1268)
applyCss(149.3, 149.3, 0.67, isFirefox);
if (oWidth <= 1268)
applyCss(166.7, 166.7, 0.6, isFirefox);
});
function applyCss(width, height, scale, isFirefox) {
var body = angular.element('body');
body.css({
'-moz-transform' : 'scale(' + scale + ')',
'-moz-transform-origin' : 'left top',
'-webkit-transform' : 'scale(' + scale + ')',
'-webkit-transform-origin' : 'left top',
'transform' : 'scale(' + scale + ')',
'transform-origin' : 'left top',
'width' : width + '%',
'height' : height + '%',
});
if (isFirefox) //body's position absolute in case of Firefox
body.css({
'position' : 'absolute'
});
}
The code snippet above illustrates the implementation of scaling functionality.