अनुवाद वाई/एक्स फ़ायरफ़ॉक्स में स्क्रॉलबार का कारण बनता है

Question

translateX या translateY का उपयोग करते समय, फ़ायरफ़ॉक्स पर पृष्ठ का लेआउट प्रभावित होता प्रतीत होता है। लगातार स्क्रॉलबार उत्पन्न होते हैं, भले ही सीएसएस विनिर्देश बताता है कि इन गुणों को लेआउट को प्रभावित नहीं करना चाहिए।

उदाहरण के लिए, http://daneden.me/animate पर जाएं और 'fadeOutRightBig' एनीमेशन पर क्लिक करें। स्क्रॉलबार सभी ब्राउज़रों पर उत्पन्न होंगे (जो सीएसएस एनिमेशन का समर्थन करते हैं) लेकिन फ़ायरफ़ॉक्स में बने रहेंगे। क्या यह मोज़िला या अन्य ब्राउज़रों द्वारा गलती के लिए है? कोई ज्ञात समाधान?

Answer 1

मुझे एक बग की तरह लगता है: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 लेकिन यह अजीब है कि यह ध्यान नहीं मिला है, मेरे लिए बहुत गंभीर लगता है।

समाधान, अगर आप इसके साथ प्राप्त कर सकते हैं, एचटीएमएल तत्व पर क्षैतिज अतिप्रवाह छिपा होगा:

html { 
    overflow-x: hidden; 
} 

या यदि आप क्षैतिज स्क्रॉल की जरूरत है, माता पिता के तत्व पर लागू करना होगा।

Answer 2

इस समस्या को हल करने के लिए एक और तरीका है तय स्थिति के लिए स्विच करने के लिए है:

#EvilElement { 
    position: fixed; 
} 

बेशक

यह अन्य दुष्प्रभाव हो सकता है, लेकिन यह पूरे पृष्ठ के लिए क्षैतिज स्क्रॉलबार अक्षम नहीं करेंगे।

Answer 3

Bugzilla issue पर एक टिप्पणी एक अच्छा बिंदु बनाता है: यह position: relative जैसा ही व्यवहार है। मूल तत्व की जगह बरकरार रखी जाती है, लेकिन यदि परिवर्तित तत्व इसके देखने योग्य कंटेनर (व्यूपोर्ट या स्क्रोल करने योग्य तत्व) के बाहर चलता है, तो स्क्रॉलबार जोड़े जाते हैं।

यह spec के अनुरूप है और अधिकतर "ठीक नहीं होगा" होगा।