स्क्रीन रोटेशन पर WKWebView सीएसएस प्रतिपादन समस्याएं

Question

सभी संभवतः सभी संभावित आईओएस संस्करणों पर UIWebView पर पूरी तरह से काम करता है, इसलिए यह एक विशिष्ट WKWebView समस्या है।

WKWebView के कार्यान्वयन को पूरा करने के बाद मैंने एक विशाल ग्राफिकल बग/समस्या में प्रवेश किया। चित्र में मेरा आवेदन ठीक काम करता है लेकिन जब मैं इसे परिदृश्य में घुमाता हूं तो कुछ अजीब होता है, मेरा हेडर और पाद लेख सही ढंग से प्रस्तुत नहीं कर रहा है।

यदि मैं अपने वेबकोड में देखता हूं तो मैं देख सकता हूं कि सीएसएस चौड़ाई सही डेटा के साथ डीओएम में अपडेट हो रही है, लेकिन मैं केवल style=“width: 568px;” पढ़ता है, फिर भी मैं हेडर/फ़ूटर के पोर्ट्रेट ओरिएंटेशन (320 पीएक्स) की चौड़ाई देख सकता हूं डोम में

मैं positioning:fixed का उपयोग कर रहा हूं लेकिन यदि मैं स्थिति में बदल रहा हूं: सापेक्ष इसे स्क्रीन्रोटेशन पर अपेक्षित के रूप में प्रस्तुत करता है (दुर्भाग्य से रिश्तेदार स्थिति इस मामले में कोई विकल्प नहीं है)। यदि मैं हेडर/फ़ूटर पर क्लिक करता हूं या स्क्रीन पर कहीं भी स्क्रॉल करता हूं शीर्षलेख और पाद लेख किसी भी तरह से अद्यतन करता है और सही ढंग से प्रस्तुत करता है और अपेक्षित के रूप में दिखाया जाता है (केवल स्क्रॉलिंग के 1px की आवश्यकता होती है)।

मैं यह दिखाने की कोशिश करूंगा कि यह कैसा दिखता है।

लाल = दृश्यमान
नीला = अदृश्य (भले ही यह वहां है और ईवेंट/स्क्रॉलिंग पर ईवेंट लॉन्च हो)।

किसी को भी पहले इस समस्या का अनुभव है और एक समाधान मिल गया?

Answer 1

मैंने सोचा कि मैं अकेला था! :) मैं WKWebView के Xamarin "संस्करण" का उपयोग कर रहा हूं, और एक ही समस्या है। मुझे इससे संदेह है कि WKWebView स्वयं पृष्ठ लेआउट को सही तरीके से अपडेट नहीं कर रहा है और मैं इसे मजबूर करने के लिए कोई भी कोड नहीं ढूंढ पाया।

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

उम्मीद है कि कम से कम जब तक WKWebView में समस्या ठीक से हल नहीं हो जाती है।

Answer 2

यह रूप में अच्छी तरह से मेरे लिए हो रहा था, और परीक्षण और त्रुटि के एक बहुत बाद मैं इसे ठीक करने के लिए, मेरे मामले में, वेब सामग्री में निम्न JavaScript/jQuery कोड के साथ कर रहा था:

$(window).on('resize', function() { 
    setTimeout(function() { 
     window.scrollTo(0, 0); 
     window.scrollTo(0, 1); 
    }, 700); 
}); 

इस समाधान के बारे में कुछ नोट:

• यह मेरे लिए काम करता है क्योंकि वेब सामग्री मैं लोड हो रहा है तय तत्वों है कि उनके भीतर की सामग्री स्क्रॉल के लिए overflow: auto सेट की पूरी तरह से होते हैं। इस प्रकार, मैंने पूरे पृष्ठ को कभी भी स्क्रॉल नहीं किया है, इसलिए मैं स्क्रॉल स्थिति को 0, 0 पर रीसेट करने के लिए स्वतंत्र हूं। यदि आपका पूरा पृष्ठ स्क्रॉल करता है तो आप स्क्रॉल स्थिति से 1 जोड़कर या घटाकर इस तकनीक को अनुकूलित कर सकते हैं, लेकिन सावधान रहें; पेज को वास्तव में काम करने के लिए स्क्रॉल करना होगा। यदि आपके पृष्ठ का scrollY अधिकतम है, तो 3000 कहें और आप इसे 3001 पर सेट करने का प्रयास करें जो काम नहीं करेगा, आपको 2 99 99 करना होगा।
• 700 का टाइमआउट मान शायद आपके उद्देश्यों के लिए अत्यधिक है; इसे कम करने का प्रयास करें।

मैंने बस इतना कुछ करने की कोशिश की जो मैं सोच सकता था; एकमात्र समाधान मैं पाया कि काम विश्वसनीय रूप से घूर्णन घटना के बाद एक स्क्रॉलिंग परिवर्तन को मजबूर करना था।

यह तय करने के लिए तत्पर हैं!

Answer 3

मुझे एक ऐसे ऐप में एक ही समस्या है जहां मैं HTML सामग्री के नियंत्रण में नहीं हूं इसलिए मैं जावास्क्रिप्ट को इस पर रोक नहीं सकता।

बग तब तक तय नहीं होंगे जब तक कि ऐप्पल के इंजीनियरों को पता न हो कि वे मौजूद हैं। मैं बग रिपोर्टिंग प्रणाली इसलिए में इस समस्या के लिए एक संदर्भ नहीं मिला ...

कृपया bugreport.apple.com पर एप्पल को इसकी रिपोर्ट एक फिक्स तेजी लाने के लिए

आप बग रिपोर्ट 20,568,425 देख सकते हैं: सीएसएस WKWebView के भीतर तत्व सही ढंग से लेआउट नहीं करते हैं जब डिवाइस घुमाया जाता है

Answer 4

सबसे अच्छा ठीक नहीं है लेकिन यहां एक काम है। ऐसा लगता है कि WKWebView रोटेशन परिवर्तनों पर इसकी सामग्री को अमान्य नहीं करता है लेकिन स्क्रॉल पर इसे अमान्य करता है (यहां देखें: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430)। के बाद से स्क्रॉल यह अमान्य हो जाएगा और करने के लिए सीएसएस के लिए बाध्य करेगा फिर से प्रस्तुत करना आप कुछ इस तरह कर सकता है:

extension WKWebView { 
    func invalidateVisibleRect() { 
     let contentOffset = scrollView.contentOffset 
     scrollView.setContentOffset(CGPoint(x: contentOffset.x, y: contentOffset.y + 1), animated: true) 
    } 
} 

आप इस्तेमाल कर सकते हैं कि अब के लिए जब तक रडार तय हो जाता है।

अद्यतन:

माना जाता है इस व्यवहार आईओएस में तय हो जाएगा 9.

Answer 5

के रूप में अन्य लोगों ने कहा, यह एक बग होना चाहिए, नीचे मेरी जावास्क्रिप्ट ठीक है, यह आप या किसी के लिए काम करते हैं आशा :

//fix IOS WKWebview rotate bug 
var viewport_width = $(window).width(); 
var viewport_height = $(window).height(); 
setInterval(function(){ 
    if($(window).width()!=viewport_width || $(window).height()!=viewport_height){ 
     viewport_width = $(window).width(); 
     viewport_height = $(window).height(); 
     window.location = '#wkwrf'; 
     window.history.back(); 
    } 
}, 200);