पिक्सेल त्रुटि: छिपा हुआ और परिणत: अनुवाद कर

Question

मैं एक शीर्षक है, जो position: absolute है और top: 100% साथ छिपा हुआ के साथ एक बॉक्स है। कैप्शन के माता-पिता में overflow: hidden है। जब मैं बॉक्स को घुमाता हूं, तो कैप्शन स्लाइड हो जाता है ताकि यह पूरी तरह से दिखाई दे।

समस्या अब यह है कि इस संक्रमण के दौरान, एक पिक्सेल बग है। इसका मतलब है कि संक्रमण के दौरान कैप्शन 1 पिक्सेल कम चौड़ा है, फिर पैरेंट बॉक्स। संक्रमण के बाद सबकुछ अच्छा दिखता है।

यह विंडोज 8.1 पर आईई 11 में और मैक 10.11.2 पर वेबकिट ब्राउज़र में दिखाई देता है।

आपको यह प्रभाव this fiddle में देखना चाहिए। जब आपको पिक्सेल बग नहीं दिखाई देता है, तो विंडो का आकार बदलने का प्रयास करें।

आपको स्क्रीनशॉट पर भी त्रुटि दिखाई देती है।

मैं पहले से ही करने की कोशिश की:

• सेट शीर्षक 1 पिक्सेल व्यापक
• जोड़े overflow-x: hidden
• translate3d

Answer 1

जोड़े मैं इसे एक कोशिश दे देंगे इन विकल्पों में से एक का उपयोग करके:

स्थिति: रिश्तेदार;

-webkit-transform: translateZ (0px);

-webkit-font-smoothing: उप-पिक्सेल-एंटीअलाइज्ड; या वेबकिट-फ़ॉन्ट-स्मूथिंग: एंटीअलाइज्ड

Answer 2

मुझे इससे पहले इस त्रुटि का सामना करना पड़ा। पिक्सेल बग ट्रांसफॉर्म के कारण होता है: अनुवाद करें।

मूल तत्व पर इसे आज़माएं।

-webkit-transform-style: preserve-3d; 

-moz-transform-style: preserve-3d; 

transform-style: preserve-3d;