変形の代替案：CSSのscale（）？

Question

CSSのプロパティposition: fixedを持つすべての要素が、要素のコンテナがCSSのtransformプロパティで装飾されている場合、期待どおりに機能しないという事実を誰もが知っていると思います。

私はこの質問に対する具体的な解決策を見つけるために多くのスレッドを通過しました。私は、自体にtransform: scale()プロパティを適用しているので、私はposition:fixedが必要な私のアプリケーションにいくつかの要素があることを意味します。

この問題を解決するためのトリックを見つけることができなかったので、代わりにCSSのtransform: scale()プロパティに代わるものがあるかどうかを尋ねます。 zoomは、まだ多くのブラウザ（特にFirefox）と互換性がないため、答えはありません。

私は両者を動作させるためにどのような変更を行うべきですか？

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' 
     }); 
} 

スケーリングを達成するために使用しているコード。

Answer 1

あなたの部門は100x200です。あなたがしなければならないのは、高さ= 100 * xと幅= 200 * xだけです。もちろん、純粋なCSSでこれを行うことはできますが、コードを書く方が簡単です。