我想大家都知道,如果一個元素的容器裝飾有CSS的transform
屬性,那麼所有帶有CSS屬性position: fixed
的元素都無法按預期工作。替代變換:scale()在CSS中?
我通過很多線索找到沒有具體解決這個問題。我的意思是,我的應用程序中有幾個元素,我需要position:fixed
才能工作,因爲我已應用transform: scale()
屬性body
本身。
因爲我找不到任何技巧使這件事情起作用,所以我反而詢問是否有替代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'
});
}
我用來實現縮放的代碼。
請問爲什麼要改變身體的尺度?它可能有助於將body元素的內容封裝在一個aditional容器div中,並且應用了變換。然後可以將固定的定位元件直接放置在身體中,從而不受任何變形的影響。 – BazzyTK
我正在使用angularjs和路由。無論如何,任何東西都會進入該容器,甚至是固定位置的元素。無論如何,我認爲這不會有幫助。 –