CODEWITHSUNDEEP
htmlangularjscss
Rishabh Sharma
Rishabh Sharma

Reputation: 113

Alternative to transform: scale() in CSS?

I think everyone is aware of the fact that all the elements with CSS property position: fixed do not work as expected if the container of an element is decorated with transform property of CSS.

I went through many threads to find no specific solution to this question. I mean I have several elements across my application where I need position:fixed to work because I have applied transform: scale() property on body itself.

Since I could not find any trick to make this thing work, I, instead, ask if there is an alternative to transform: scale() property of CSS. zoom of course is not the answer because it's still not compatible with many browsers (especially Firefox).

Please suggest what changes should I make to make them both work?

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 I am using to achieve scaling.

Upvotes: 3

Views: 14426

Answers (1)

Dražen
Dražen

Reputation: 293

Your div is 100x200. If you want to scale(x) all you have to do is height=100*x and width=200*x. Of course, you can do this with pure css, however it is easier to code it.

Upvotes: 0

Related Questions