iOS Chrome คำนวณความสูงที่ไม่ถูกต้องของเอกสาร

เพื่อเติมเต็มความสูงทั้งหมดของหน้าฉันใช้height: 100%;สำหรับ html และแท็กเนื้อหาและทำงานได้ดีจนกว่าจะปิดและเปิดเบราว์เซอร์ใหม่ (ฉันไม่ได้ใช้ 100vh เพราะปัญหาบนอุปกรณ์มือถือhttps://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browser.html )

ขั้นตอนในการทำซ้ำ:

• เปิดhttps://angelika94.github.io/rick/ใน Google Chrome บน iPhone (คุณจะเห็นว่าการนำทาง (Morty and Beer) วางอยู่ที่ด้านล่างของหน้า) สกรีนช็อตของ css Rick พร้อมการนำทาง
• ปิดเบราว์เซอร์และลบออกจากการนำทางมัลติทาสก์: https://support.apple.com/th-th/HT201330
• เปิดเบราว์เซอร์อีกครั้ง (คุณจะเห็นว่าการนำทางด้านล่างย้ายออกจาก "หน้าจอแรก" และตอนนี้คุณต้องเลื่อนเพื่อดู) ภาพหน้าจอของ css Rick ไม่มีการนำทาง

หน้าจะได้รับการแก้ไขด้วยตัวเองในกรณีเหล่านี้:

• อัปเดตหน้า
• หมุนอุปกรณ์เป็นแนวนอน
• เปิดและปิดการนำทางของเบราว์เซอร์โดยแท็บ
• ปิดและเปิดเบราว์เซอร์ใหม่โดยไม่ต้องปิดในมัลติทาสก์ nav

ทำไมมันเกิดขึ้น ฉันจะแก้ไขพฤติกรรมนี้ได้อย่างไร

ขอบคุณล่วงหน้า!

ฉันมีปัญหาแตกต่างกันมาก แต่ฉันคิดว่าวิธีแก้ปัญหาที่ฉันได้ผลอาจทำงานได้กับสถานการณ์ของคุณเช่นกันเพราะคุณกล่าวถึงการอัปเดตหน้าเว็บจะแก้ไขได้

ดังนั้นฉันจึงมีปัญหากับโครเมี่ยมบน Android ซึ่งถ้าคุณเลื่อนเร็วมาก (ไม่ใช่เรื่องผิดปกติบนมือถือ) องค์ประกอบบางอย่างจะล้มเหลวในการรับ / ทาสีใหม่ ค้นหาวิธีแก้ปัญหาทุกที่ แต่ไม่พบสิ่งใดที่จะใช้งานได้

ในที่สุดฉันก็รู้วิธีแก้ไขที่ใช้งานได้:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

ดังนั้นสิ่งนี้จะบังคับให้หน้าทาสีใหม่อย่างต่อเนื่องในรอบ 3 วินาที

บางทีฉันควรปรับแต่งมันเพื่อเปลี่ยนเพียงเสี้ยววินาทีในทุก ๆ 2 วินาทีแทนที่จะเป็นต่อเนื่อง:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

ฉันพยายามzoom: 99.99999;ที่จะ1แต่องค์ประกอบบางอย่างที่เปลี่ยนขนาดดังกล่าวข้างต้นที่ 1 เกี่ยวกับผลกระทบเลื่อนบางคนจะแสดงการหายใจการซูม ดังนั้น 99.99999 ถึง 99.99998 คือสิ่งที่ทำงานสำหรับฉันที่จะทำให้ผลที่มองไม่เห็น

โซลูชันแฮ็คเล็กน้อยที่อาจนำเสนอปัญหาด้านประสิทธิภาพสำหรับหน้าเว็บที่ยาวมาก ๆ แต่อาจจะไม่ใช่เพราะเบราว์เซอร์ควรแสดงสิ่งที่อยู่บนหน้าจอเท่านั้น หน้าเว็บที่ฉันใช้หน้าจอนี้มีกราฟิกที่หนักหน่วงพร้อมเอฟเฟกต์หลายเลเยอร์ที่ซับซ้อนจำนวนมากและดูเหมือนจะไม่มีผลกระทบด้านประสิทธิภาพที่เห็นได้ชัดเจน

ดูเหมือนว่าเบราว์เซอร์มือถือจำนวนมากมีการเรนเดอร์ที่ดีที่สุดซึ่งนำไปสู่ความล้มเหลวที่แปลกประหลาดด้วยการแก้ไขที่มีเอกสารน้อย การบังคับให้ทาสีซ้ำเป็นวิธีแก้ไขเดียวที่ฉันพบ

ฉันลองวิธีอื่น ๆ ที่มีความก้าวร้าวน้อยลงและเป็นเอกสารในการบังคับให้ทาสีใหม่ ชอบเพิ่มข้อความในหน้า (สุดลูกหูลูกตา) หลังจากเลื่อนหยุดเป็นเวลา 200ms และเช่น แม้ว่าจะไม่มีอะไรทำงานดังนั้นการแฮ็กภาพเคลื่อนไหวตลอดทั้งหน้าตลอดไป

ในกรณีของคุณแฮ็กอื่น ๆ อาจทำงานได้ดีขึ้น นี้บทความร่างทุกสิ่งต่างๆที่ก่อให้เกิดการวาดใหม่ / จัดเรียงใหม่เพื่อให้คุณสามารถลองทำบางสิ่งเหล่านี้ผ่านสคริปต์