छद्म तत्व क्रोम में गायब हो जाते हैं लेकिन फ़ायरफ़ॉक्स नहीं

मैं वर्तमान में एक परियोजना पर काम कर रहा हूं जिसके लिए तत्व के शीर्ष पर और नीचे की सीमा की आवश्यकता है और इसके लिए पृष्ठ के किनारे तक विस्तार किया जाना चाहिए। मेरे पास एक रैपर है जो 960px चौड़ा है, मैंने ओवरफ्लो-एक्स को शरीर और एचटीएमएल पर छुपाया है। और मैं निम्नलिखित शैलियों का उपयोग कर रहा हूँ।

#profile-page{
    position:relative;
    overflow:hidden;
}
#profile-page .bottom:after, #profile-page .bottom:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 5px;
  background-image: -webkit-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -ms-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -moz-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-size: 380px;
}

#profile-page .bottom:before{
  top: -2px;
}
#profile-page .bottom:after{
  bottom: -2px;
}
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

स्टाइल फ़ायरफ़ॉक्स में ठीक दिखता है, यह क्रोम या यानी 9 में दिखाई नहीं देता है (दूसरों का परीक्षण नहीं किया गया है)। मैंने स्क्रीनशॉट शामिल किए हैं ताकि आप वास्तविक आउटपुट देख सकें।

यदि मैं स्क्रीन के किनारे पर बॉटम खिंचाव बनाने के लिए स्टाइल को हटा देता हूं, तो स्टाइल क्रोम में दिखाई देता है। मैं यह नहीं समझ सकता कि उस स्टाइल का कौन सा टुकड़ा मेरे छद्म तत्वों के साथ गड़बड़ कर रहा है लेकिन उम्मीद है कि यहां कोई व्यक्ति जानता होगा। अग्रिम में धन्यवाद।

संपादित करें: बस इसे साफ़ करना चाहता था, अगर मैं निम्नलिखित नियमों को हटा देता हूं जिन्हें मैंने psuedos के बगल में हटा दिया है। लेकिन फिर मेरा div अब स्क्रीन के किनारे तक नहीं पहुंचता है और रैपर में निहित है, जो नहीं हो सकता

 #profile-page .bottom{
    padding-left:3000px; -REMOVE
    margin-left:-3000px; -REMOVE
    padding-right:3000px; -REMOVE
    margin-right:-3000px; -REMOVE
    position:relative;
    background: #ffffff;
}

सीएसएस कम से कम लिखे गए हैं, किसी भी कम शॉर्टकट को निकालने का प्रयास किया है, लेकिन शायद कुछ लोगों को लगता है कि वे कुछ गलत देखते हैं।

संपादित करें: अनुरोध के रूप में, HTML संरचना

<html>
<body id="profile-page">
  <div id="wrapper">
    <div class="top"></div>
    <div class="item bottom">
      <div id="profile-content">PROFILE LINKS</div>
    </div>
  </div>
</body>
</html>

Firefox

Chrome

शीर्ष फ़ायरफ़ॉक्स, नीचे क्रोम है

0
@Diodeus मुझे लगता है कि मैं उस विषय के आधार पर सही ढंग से उनका उपयोग कर रहा हूं।
जोड़ा लेखक OneEightLeft, स्रोत
@ नाथन, मैंने HTML संरचना को जोड़ा है। यह बहुत बुनियादी है।
जोड़ा लेखक OneEightLeft, स्रोत
@brouxhaha मैं वास्तव में इस लेआउट के साथ अटक गया हूं, इसे फ़ायरफ़ॉक्स में दिखाने के लिए कुछ होना चाहिए और क्रोम नहीं
जोड़ा लेखक OneEightLeft, स्रोत
इससे मदद मिल सकती है: stackoverflow.com/questions/10871333/…
जोड़ा लेखक Diodeus - James MacFarlane, स्रोत
क्या आप अपने .bottom div को रैपर के बाहर ले जा सकते हैं? यदि ऐसा है, तो आप एक रैपर की तरह .bottom कार्य कर सकते हैं, फिर # प्रोफ़ाइल-सामग्री को चौड़ाई की आवश्यकता है जिसकी आपको आवश्यकता है।
जोड़ा लेखक brouxhaha, स्रोत
ऐसा लगता है कि क्रोम तत्वों की चौड़ाई को सीमित करता है। यदि आप इसे देखते हैं: jsfiddle.net/xLF8r/2 , मैंने सेट किया है दाएं: -280% , जो अधिकतम आकार है जिसे मैं क्रोम में गायब होने से पहले सेट कर सकता हूं। फ़ायरफ़ॉक्स में, मैं उस प्रतिशत को किसी भी चीज़ में बदल सकता हूं। मुझे कुछ भी नहीं मिला जो कहता है कि क्रोम एक छद्म-तत्व आकार को सीमित करता है।
जोड़ा लेखक brouxhaha, स्रोत
और यहां: jsfiddle.net/xLF8r/3 , आप देख सकते हैं कि मैंने चौड़ाई निर्धारित की है : से 1 9 00 पीएक्स के बाद, जो उच्चतम है, मैं इसे गायब होने से पहले सेट कर सकता हूं। ऐसा करने से आपके पैडिंग/मार्जिन हैक को छद्म तत्व दिखाने की अनुमति मिलती है।
जोड़ा लेखक brouxhaha, स्रोत

2 उत्तर

From my tests: Chrome limits the size of the pseudo-elements :before and :after to 1900px (at least in this case): http://jsfiddle.net/xLF8r/4/

आपके मामले में, आप पैडिंग/मार्जिन को .bottom पर 2900px/-2900px पर सेट करते हैं ताकि ढाल शरीर के किनारे पर देखा जा सके। यदि आप इसे 950 पीएक्स/-950 पीएक्स में बदलते हैं, तो वे दिखाते हैं। यदि आप छद्म-तत्वों की चौड़ाई को 1 9 00 पीएक्स पर सेट करते हैं, तो वे दिखाई देते हैं। यदि आप दाएं: -280% सेट करते हैं, तो वे दिखाते हैं (यह इस उदाहरण में -1900px तक गणना करता है)।

यदि आप फ़ायरफ़ॉक्स में इस पहेली को देखते हैं, तो तत्व इससे कोई फर्क नहीं पड़ता कि आप इन आकारों को सेट करते हैं।

Another test: Changing background-size allowed the element to get larger and stay visible: http://jsfiddle.net/xLF8r/6/

इसलिए यदि आप अपना पृष्ठभूमि आकार बढ़ाते हैं और अपने ढाल को बदलने के लिए इसे देखने के लिए इसे अधिक रंग-स्टॉप जोड़कर रखते हैं, तो इसे काम करना चाहिए।

इन परीक्षणों से, यह प्रतीत होता है कि क्रोम छद्म तत्व के आकार को पृष्ठभूमि आकार से केवल 5 गुना बड़ा होने के लिए सीमित करता है। पहले परीक्षण में 1 9 00 पीएक्स/380 पीएक्स = 5; 1 9 01 पीएक्स तत्व गायब हो जाता है। दूसरे टेस्ट में 6900 पीएक्स/1380 पीएक्स = 5; 6901 पीएक्स तत्व गायब हो जाता है।

Edit for another test and for future reference I was curious, so I created a Codepen looking at some examples. Here, I'm able to go up to 10 times the background-size. Putting the same code into jsfiddle also shows that 10 times is working. So in your code, there is something that is reducing it to 5 times.

मेरे पास अपना कोड कम किया गया है इस व्यवहार को दोहराने के लिए, और मैं ' एम अभी भी 10 की बजाय केवल 5 गुना बड़ा हो रहा है। मैं इस मामले में क्यों फंस गया हूं।

2
जोड़ा
वाह, भयानक जवाब।
जोड़ा लेखक OneEightLeft, स्रोत
मैंने कुछ और परीक्षण किया और पता चला कि 10x पृष्ठभूमि-आकार क्रोम की अनुमति देता है - मैं अभी भी आपका कोड 5x से अधिक नहीं जा सका।
जोड़ा लेखक brouxhaha, स्रोत
just remove the line//position:relative;
from the lines
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

I am sure it will work.
0
जोड़ा