আইওএস ক্রোম নথির ভুল উচ্চতা গণনা করে

Question

পৃষ্ঠার পুরো উচ্চতা পূরণ করার জন্য, আমি height: 100%;এইচটিএমএল এবং বডি ট্যাগ ব্যবহার করি এবং কোনও ব্রাউজার বন্ধ হয়ে গেলে এবং পুনরায় খোলা না হওয়া পর্যন্ত এটি কাজ করে। (মোবাইল ডিভাইসগুলির সমস্যার কারণে আমি 100vh ব্যবহার করি না https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-docament-in -সোম-মোবাইল-ব্রাউজারগুলি html )

ধাপ পুনর্গঠন কর:

• আইফোন-এ গুগল ক্রোমে https://angelika94.github.io/rick/ খুলুন (আপনি দেখতে পাবেন যে নেভিগেশন (মর্তি এবং বিয়ার) পৃষ্ঠার নীচে স্থাপন করা হয়েছে) নেভিগেশন সহ সিএসএস রিকের স্ক্রিনশট
• ব্রাউজারটি বন্ধ করুন এবং এটি মাল্টিটাস্কিং নেভিগেশন থেকে সরান: https://support.apple.com/en-us/HT201330
• ব্রাউজারটি আবার খুলুন (আপনি দেখতে পাবেন যে নীচের নেভিগেশনটি "প্রথম স্ক্রিন" থেকে সরানো হয়েছে এবং এখন এটি দেখতে আপনাকে স্ক্রোল করতে হবে) নেভিগেশন ছাড়াই সিএসএস রিকের স্ক্রিনশট

এই ক্ষেত্রে পৃষ্ঠাটি নিজেই ঠিক করা হবে:

• আপডেট পৃষ্ঠা
• ডিভাইসটিকে ল্যান্ডস্কেপে ঘোরান
• ট্যাবগুলি দ্বারা ব্রাউজারের নেভিগেশন খুলুন এবং বন্ধ করুন
• ব্রাউজারটি মাল্টিটাস্কিং নেভিতে বন্ধ না করে বন্ধ করুন এবং পুনরায় খুলুন

কেন এমন হয়? আমি কীভাবে এই আচরণটি ঠিক করতে পারি?

তুমাকে অগ্রিম ধন্যবাদ!

Comments

আরও তথ্য এখানে প্রয়োজন। আপনি একটি কোড নমুনা পোস্ট করতে পারেন? সিএসএস / এইচটিএমএল মার্কআপের বাকী অংশগুলি কেবল উচ্চতা এবং প্ল্যাটফর্ম নয়, ইস্যুগুলিতে অবদান রাখতে পারে

— রাচেল গ্যালেন

কৌতূহলী - আপনার উদাহরণে, আপনি .linksডিভকে পরিবর্তন করতে পারেন position: absolute। আপনি যে আচরণটি দেখছেন তা কি এটি পরিবর্তন করে? (আমার কাছে পরীক্ষার জন্য আইফোন নেই)

— স্লাইনাগ

এখানে আপনার কোড উদাহরণ র‌্যাচেল গ্যালেন।

— অ্যারোন 3219

এছাড়াও, আপনার ফোনটি ল্যান্ডস্কেপ মোডে এবং আবার ফিরে ঘোরানোর চেষ্টা করুন। এটা ঠিক করা হবে। আমি মনে করি এটি ক্রোমের একটি সমস্যা, এটি এইচটিএমএল / সিএসএস নয়। এটি কেবল ক্রোমে উপস্থিত হয় এবং আপনাকে যে পরিমাণ পরিমাণ নীচে স্ক্রোল করতে হয় তা হ'ল আপনি যদি একত্রিত হন তবে ক্রোম ব্রাউজারের নীচে এবং শীর্ষ বারের পিক্সেলের সঠিক পরিমাণ result

— অ্যারোন 3219

@ স্লিনাঘ না এটি করেনা।

— অ্যারোন 3219

Answer 1

আমার খুব আলাদা সমস্যা ছিল, তবে আমি মনে করি যে সমাধানটি আমি কাজ করেছিলাম তা আপনার পরিস্থিতির জন্যও কার্যকর হতে পারে, কারণ আপনি পৃষ্ঠাটি আপডেট করার বিষয়টি উল্লেখ করেছেন।

তাই অ্যান্ড্রয়েডে ক্রোম নিয়ে আমার সমস্যা ছিল যেখানে আপনি খুব দ্রুত স্ক্রোল করে (মোবাইলে অস্বাভাবিক না) কিছু উপাদান পুনরায় / আঁকাতে ব্যর্থ হবে। একটি সমাধানের জন্য সর্বত্র অনুসন্ধান করা হয়েছে তবে কার্যকর এমন কোনও কিছু খুঁজে পেল না।

অবশেষে, আমি একটি কার্যকারিতা স্থির করেছি:

.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।

সামান্য হ্যাকি সমাধান যা খুব দীর্ঘ পৃষ্ঠাগুলির জন্য পারফরম্যান্সের সমস্যাগুলি উপস্থাপন করতে পারে তবে নাও পারে না, কারণ ব্রাউজারটি কেবল অনস্ক্রিনে রেন্ডারিং করা উচিত। আমি যে পৃষ্ঠাগুলিতে এটি ব্যবহার করেছি তা বহুবিধ জটিল মাল্টি-লেয়ার প্রভাব সহ গ্রাফিকভাবে ভারী, এবং এটির লক্ষণীয় পারফরম্যান্সের প্রভাব আছে বলে মনে হয় না।

অনেকগুলি মোবাইল ব্রাউজারের অত্যধিক অনুকূলিতকরণ উপস্থাপনা রয়েছে বলে মনে হয়, যা কয়েকটি ভাল নথিভুক্ত সংশোধনগুলির সাথে উদ্বেগজনক ব্যর্থতার দিকে পরিচালিত করে। পুনরায় রঙ করা বাধ্যতামূলকভাবে পাওয়া একমাত্র কার্যকারী স্থির কাজ ছিল।

আমি পুনরায় চাপ দেওয়ার জন্য অন্যান্য, কিছুটা কম আক্রমণাত্মক, নথিভুক্ত পদ্ধতি চেষ্টা করেছি। পৃষ্ঠায় কিছু পাঠ্য যুক্ত করার মতো (অদৃশ্যভাবে) 200 মিমি স্ক্রোলিং থামার পরে এবং এ জাতীয়। যদিও কিছুই কাজ করে নি, এভাবে আমার অ্যানিমেট-পুরো-পৃষ্ঠা-চিরকালের হ্যাক।

আপনার ক্ষেত্রে, অন্যান্য হ্যাকগুলির মধ্যে কিছু ভাল কাজ করতে পারে। এই নিবন্ধটি সমস্ত বিভিন্ন কিছুর পুনর্নির্মাণ / পুনর্বিবেচনার কারণের রূপরেখা দেয় যাতে আপনি স্ক্রিপ্টের মাধ্যমে এই জিনিসগুলির কিছু করার চেষ্টা করতে পারেন।