फ़ायरफ़ॉक्स में सीएसएस स्केल का उपयोग करते समय, तत्व मूल स्थिति

Question

फ़ायरफ़ॉक्स में स्केल का उपयोग करते समय स्केल किए गए तत्व को ठीक से स्केल कर दिया जाता है। समस्या यह है कि यह निर्धारित है जैसे कि यह स्केल नहीं किया गया है।

यह क्रोम में ठीक काम करता है, और शायद आईई, सफारी और ओपेरा में भी। ये ब्राउज़र सभी सीएसएस ज़ूम संपत्ति का समर्थन करते हैं, जहां फ़ायरफ़ॉक्स नहीं करता है। फ़ायरफ़ॉक्स के लिए मैं -मोज़-ट्रांसफॉर्म का उपयोग कर रहा हूं: स्केल (0.3);

यह मेरा सीएसएस है: (

यह ऐसा नहीं देखना चाहिए क्या है के रूप में:

#overview .page-content { 
    zoom: 0.3; 
    -moz-transform: scale(0.3); 
} 

यह वही है की तरह दिखना चाहिए (क्रोम के रूप में) है फ़ायरफ़ॉक्स):

क्या कोई यह जानता है कि इसे कैसे ठीक किया जाए? या शायद एक कामकाज?

Answer 1

thirtydot जैसा कि बताया जा:

position: absolute; 
-moz-transform-origin: 0 0; 

इस चाल करना होगा।

Answer 2

यदि पूर्ण स्थिति कोई विकल्प नहीं है - और display: table-cell के अनुसार min-width परिभाषा के साथ जागरूक होना चाहिए, तो यह भी चाल होनी चाहिए।

उदा। इससे मुझे विभिन्न स्क्रीन संकल्पों में अच्छी तरह से स्केलिंग करने वाले ग्राहक लोगो के साथ एक पंक्ति प्राप्त करने में मदद मिली।

Answer 3

मैंने जोड़ा- ट्रांसफॉर्म-उत्पत्ति: 0 0; और यह अभी भी काम नहीं किया।

क्रोम में किसी भी तरह से यह -webkit-transform-orig: 0;

तो मैंने इसे बदल दिया- ट्रांसफॉर्म-उत्पत्ति: शीर्ष बाएं; और यह अब ठीक काम करता है।

पूर्ण कोड:

-moz-transform: scale(50%); 
-moz-transform-origin: top left; 
-o-transform: scale(50%); 
-o-transform-origin: top left; 
-webkit-transform: scale(50%); 
-webkit-transform-origin: top left;