आईफोन 6 प्लस लैंडस्केप मोड में टैब और निश्चित तत्वों के साथ अजीब बग

मुझे आईफोन 6+ सफारी के साथ कुछ पागल समस्याएं हैं (आईओएस 9 ज्यादातर, हालांकि आईओएस 8 में कुछ मामूली ग्लिच भी हैं) टैब मोड के साथ। सभी निश्चित तत्व चित्र और परिदृश्य में सही ढंग से स्थित हैं, लेकिन एक या अधिक टैब खुले होने के साथ लैंडस्केप मोड में दृश्यमान और/या स्थानांतरित नहीं होते हैं। भले ही वे दिखाई नहीं दे रहे हैं, फिर भी वे क्लिक करने योग्य हैं और शेष सामग्री को ओवरलैप करते हैं। घूर्णन डिवाइस कुछ हद तक समस्या को हल करता है, साथ ही टैब के बीच स्विचिंग भी करता है। निश्चित स्थिति से स्थिर और वापस तत्व स्थिति सेट करना भी मदद करता है।आईफोन 6 प्लस लैंडस्केप मोड में टैब और निश्चित तत्वों के साथ अजीब बग

HTML:

<html> 
    <head></head> 
    <body> 
    <div id="application"> 
     <div class="outer-header"> 
     <div class="inner-header"> 
      <a id="link-test" href="#">Click me!</a> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

सीएसएस:

body { 
    background: linen; 
} 

.outer-header { 
    position: fixed; 
    width: 100%; 
    height: 30px; 
    top: 0; 
    left: 0; 
    background: steelblue; 
} 

.inner-header { 
    background: white; 
}

आवेदन काफी बड़ा है, लेकिन मैं codepen पर इस समस्या का पुन: पेश करने में कामयाब रहे है: परिदृश्य में सीधे iPhone 6 Plus position:fixed bug

ओपन यह टैब के साथ।

स्रोत

2016-02-24 Alex.Me

यदि आप अपने आवेदन तत्व में कोई शैली जोड़ते हैं तो काम करेंगे। कुछ इस तरह:

document.querySelector('#link-test') 
 
    .addEventListener('click', 
 
    function(e) { 
 
     e.preventDefault(); 
 
     alert('You did it!'); 
 
    });

body { 
 
    background: linen; 
 
} 
 

 
#application { 
 
    position: relative; 
 
} 
 

 
.outer-header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 30px; 
 
    top: 0; 
 
    left: 0; 
 
    background: steelblue; 
 
} 
 

 
.inner-header { 
 
    background: white; 
 
}

<html> 
 
    <head></head> 
 
    <body> 
 
    <div id="application"> 
 
     <div class="outer-header"> 
 
     <div class="inner-header"> 
 
      <a id="link-test" href="#">Click me!</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

स्रोत

2016-10-05 00:51:21

आईफोन 6 प्लस लैंडस्केप मोड में टैब और निश्चित तत्वों के साथ अजीब बग

उत्तर

संबंधित मुद्दे