2

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.

Improve this question
2
  • 3
    May I ask why you would transform the scale of the body? It may help to wrap the contents of the body element in an aditional container div with the transform applied. The fixed positioned elements could then be placed directly in the body, thereby not being affected by any transforms. Commented Feb 26, 2017 at 15:16
  • I am using angularjs and routing for that matter. Everything would anyway come inside that container, even the elements with fixed position. I don't think it would help in anyway. Commented Feb 26, 2017 at 15:37

2 Answers 2

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I have edited my question. Please look at the code that I am using to achieve scaling. I have to pass Width and Height in percentage together with the scaling factor. Is there any work around for this processing?
What I am actually doing is: reduce the scaling factor and increase the width and height of the body so that user can see same ui scaling if they zoom in or zoom out in their browser.
That could be done adding only one <meta name="viewport" content="width=device-width, initial-scale=1"> tag.
I think I am not able to explain myself. Take it this way, when user zooms in (eg. in Chrome Ctrl + Mouse Scroll) I don't want my UI to get enlarged due to this. I want them to stay of the same size as it was initially. No matter if user zooms in or zooms out my view should not change its size (enlarged or reduced).
0

Try wrapping all your content in a container div, apply the scale to that container, and keep any fixed elements outside of it.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.