পৃষ্ঠার ডানদিকে সাদা স্থান প্রদর্শিত হবে যখন পটভূমির চিত্রটি পৃষ্ঠার পূর্ণ দৈর্ঘ্য প্রসারিত করতে হবে [বন্ধ]

Question

আমাদের ওয়েবপৃষ্ঠার পটভূমির চিত্রগুলিতে ফায়ারফক্সের পাশাপাশি আইপ্যাডে / আইফোনগুলিতে সাফারি রয়েছে যা পৃষ্ঠার ডানদিকে সাদা স্থান দেখাচ্ছে।

পটভূমি চিত্রগুলি অন্যান্য ব্রাউজারগুলিতে সূক্ষ্মভাবে প্রসারিত করে তবে সেই ব্রাউজারগুলিতে ব্রাউজারের পুরো দৈর্ঘ্য না বাড়িয়ে তুলতে আমাদের সমস্যা হচ্ছে।

একটি নিন ফায়ারফক্সে আমাদের সাইট এ বর্ণন দেখতে আমি কি মানে।

Comments

আপনি যদি বুটস্ট্র্যাপ বা ফাউন্ডেশনের মতো ফ্রেমওয়ার্ক ব্যবহার করছেন তবে পরীক্ষা করুন যে এখন কলামটি দেহের প্রথম সন্তান, তবে অন্য ডিভে নেস্টেড রয়েছে যাতে কিছু ধরণের প্যাডিং রয়েছে (ছোট -12 ফে)।

— লাইটনিংসল

আপনি কি এটি সমাধান করেছেন ডেভ?

— gumuruh

পাগল, তাই না 6 বছর পরে, এবং আইওএস সাফারি এখনও এই সমস্যাটি দেখায়। আমি অসংখ্য সিএসএস সমাধান চেষ্টা করেছি, তবে শেষ পর্যন্ত jQuery ব্যবহার করতে হয়েছিল। stackoverflow.com/a/45009357/391605

— মাইক গ্লেডহিল

Answer 1

আমি যোগ করলাম:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

অন্যান্য শ্রেণীর উপরে আপনার সিএসএসে একেবারে শীর্ষে রয়েছে এবং আপনার সমস্যাটি ঠিক হয়ে গেছে বলে মনে হচ্ছে।

আপনার আপডেট করা .css ফাইলটি এখানে উপলভ্য

Comments

দুর্দান্ত, এটি আমার জন্য একটি বাগ ঠিক করেছে যা আমাকে কিছুক্ষণ বিরক্ত করছে!

— আনন্দিত

এই কোডটি সহ আমার সাফারি আইফোনে স্ক্রোল করার সমস্যা ছিল, এটি খুব ধীর হয়ে গেছে। আমি শেষ পর্যন্ত এটি উচ্চতার সংমিশ্রণটি পেয়েছিলাম: 100% এবং ওভারফ্লো-এক্স: লুকানো, তাই আমি উচ্চতা সরিয়েছি: 100% এবং এটি আরও ভাল কাজ করে।

— পল ম্যাসন

ধন্যবাদ এটি একটি কবজির মতো কাজ করেছে। আমি প্রায় সবসময় ভাবতাম কীভাবে প্রায় অসীম স্ক্রোল বারটির যাত্রা নেওয়া যায়। কেন এটি উত্তর হিসাবে চিহ্নিত করা হয়নি তা নিশ্চিত নয়।

— isurfbecause

আমি দেখতে পেলাম যে বুটস্ট্র্যাপের 'সারি' শ্রেণিটি একটি "মার্জিন-ডান: -15px" দিচ্ছে যা আমার পৃষ্ঠায় এটি সৃষ্টি করছে।

— জোসেফকে

জোসেফকে বলতে গেলে এই সমস্যাটি প্রায়শই বুটস্ট্র্যাপের ধারক, সারি এবং কলামের বস্তুগুলির ভুল ব্যবহার থেকে উদ্ভূত হয়, যা একে অপরকে নিখুঁতভাবে অফসেট করতে প্যাডিং এবং নেতিবাচক মার্জিন ব্যবহার করে, তবে কেবলমাত্র একসাথে সঠিকভাবে ব্যবহার করা হয়। নাহলে ভেঙে যায়! আমার অভিজ্ঞতায় ডান হাতের শ্বেত স্থানের এটি অন্যতম সাধারণ কারণ। ব্রিলিয়ান্টের জন্য, বুটস্ট্র্যাপের জন্য ধারক, সারি, কলামের চাক্ষুষ ব্যাখ্যা এবং এটি এবং অন্যান্য সমস্যাগুলির আলোচনা সহ, এটি পড়ুন (না আমি এটি লিখি না): হ্যালোরিইক.কম

— জেমস

Answer 2

ঘোস্ট সিএসএস উপাদানগুলির জন্য আপনার সিএসএস ডিবাগ করুন।

আপনার সিএসএস ডিবাগ করার জন্য এই বুকমার্কটি ব্যবহার করুন: https://blog.wernull.com/2013/04/debug-ghost-css-eitions-caasing-unwan-- scrolling/

অথবা সরাসরি নিজেরাই সিএসএস যুক্ত করুন:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

আমার ক্ষেত্রে একটি ফেসবুক লাইক বাটন সমস্যা তৈরি করেছিল।

Comments

এটি সত্যিই কাজে এসেছিল

— জোসান ইরচেইটা

জমকালো সমাধান! এটি আপনাকে সমস্যার মূল খুঁজে পেতে এবং এটি সঠিকভাবে ঠিক করতে সহায়তা করবে এবং এর জন্য সমস্ত কিছু দরকার সিএসএসের কয়েকটি লাইন।

— opdb

এটি গ্রহণযোগ্য উত্তর আইএমও হওয়া উচিত। আমার বাজিটি হ'ল বেশিরভাগ লোক 100vw কোনও কিছুর প্রস্থ হিসাবে ব্যবহার করেছিল এবং ফলস্বরূপ এই বাগটি পেয়েছিল। ওভারফ্লো কেবল লুকিয়ে রাখা একটি সর্বোত্তম সমাধান।

— লুক

এটি চিত্তাকর্ষক, 2 ঘন্টা ধরে সেই গডমডিট সাদা জায়গাতে কাটিয়েছে, এটি এটিকে সমাধান করেছে।

— কার্লোস রোসো

বাহ, বেশ কয়েক ঘন্টা ব্যয় করে এবং কোডটির কয়েকটি লাইন কোড সহ অপরাধীকে খুঁজে পেল।

— সাথীদের

Answer 3

এখানে সরবরাহিত কয়েকটি সহায়ক কৌশল অন্বেষণ করার পরে, আমি জানতে পেরেছিলাম যে আমাকে কেবল আইওএস নির্দিষ্ট সিএসএস যুক্ত করতে হবে (আমি এটি আমার মূল সিএসএস শীটের নীচে রেখেছি)) মনে হয় ওভারফ্লো-এক্সটি লুকিয়ে রাখা আমার পক্ষে উত্তর ছিল। আমি ধরে নিয়েছি যে প্রস্থটি 100% এ উল্লেখ করা আমার ইভেন্টের প্রসারিত হওয়ার ক্ষেত্রে সহায়তা করে। এটি লক্ষ করা উচিত যে আমি কেবল আইওএস-এ এই সমস্যাটি নিয়ে আসছিলাম। যদি এটি ফায়ারফক্সেও থাকে তবে কেবল এইচটিএমএল এবং বডি ব্লকটি সম্ভবত ব্যবহার করা উচিত কারণ @ মিডিয়া বিশেষত মোবাইল ডিভাইসগুলিকে লক্ষ্য করে চলেছে।

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

এটি কারও কাছে ভুল মনে হলে আমাকে হিপ করুন :)

Comments

এটিই ছিল আমার সমস্যা সমাধান করার একমাত্র জিনিস

— জেসনডাভিস

ধন্যবাদ - আমার জন্য সেরা সমাধান। মোটামুটি

— নিরঙ্কুশও

এটি সমস্যার সমাধান করে এবং মোবাইল সাদা জায়গার জন্য

— অর্থবোধ করে

প্রয়োগের পরে, সাফারি আইফোন 6 এ স্ক্রোল করা অচল হয়ে পড়ে। মোবাইল সাফারিটির কাজটি সুচারু করার জন্য আমি কী অতিরিক্ত সম্পত্তি হারিয়ে যাচ্ছি?

— এরিক রাইবালকিন

আমার জন্য সেরা উত্তর !!

— ইউসুফ বোডায়দা

Answer 4

এটি বেশ পুরানো প্রশ্ন, তবে আমি ভেবেছিলাম আমার 2 সেন্ট যোগ করব। আমি ভূত সিএসএস সহ উপরের সমাধানগুলি চেষ্টা করেছি, যা আমি অবশ্যই ভবিষ্যতের ব্যবহারের জন্য সঞ্চয় করব। তবে এর কোনওটিই আমার পরিস্থিতিতে কাজ করেনি। আমি এখানে আমার সমস্যা ঠিক করেছি। আশা করি এটি অন্য কাউকে সহায়তা করবে।

ওপেন ইন্সপেক্টর (বা আপনার পছন্দ যাই হোক না কেন) এবং বডি ট্যাগে প্রথম ডিভ দিয়ে শুরু করুন display: none;, কেবল সেই উপাদানটিতে যুক্ত করুন। যদি স্ক্রোল বারটি অদৃশ্য হয়ে যায়, আপনি জানেন যে উপাদানটিতে এমন উপাদান রয়েছে যা সমস্যার কারণ। তারপরে, প্রথম সিএসএস নিয়মটি সরান এবং সমন্বিত উপাদানটিতে একটি স্তর নীচে যান। সিএসএসকে সেই ডিভের সাথে যুক্ত করুন, এবং যদি স্ক্রোল বারটি চলে যায়, আপনি জানেন যে উপাদানটি হয় হয়, বা আপত্তিকর উপাদান যুক্ত করে। সিএসএস যুক্ত করা যদি কিছু না করে তবে আপনি জানেন যে এটি ডিভই ছিল না যা সমস্যার কারণ হয়ে দাঁড়িয়েছিল, এবং ধারকটির অন্য কোনও ডিভই এটি সৃষ্টি করছে, বা ধারক নিজেই এটি সৃষ্টি করছে।

এটি কারও কারও জন্য খুব বেশি সময় ব্যয়কারী হতে পারে। আমার পক্ষে ভাগ্যবান, আমার সমস্যাটি শিরোনামে ছিল, তবে আপনার সমস্যাটি ফুটারে বা কিছু বললে আমি এটি কিছুটা সময় নিয়ে ভাবতে পারি।

Comments

এই পদ্ধতিটি আমাকে বাগ ধন্যবাদ খুঁজে পেতে সহায়তা করেছে

— বিল

হ্যাঁ, বা আপনি একের পর এক সর্বোচ্চ স্তরের ডিভিডগুলি লুকিয়ে রেখে ডোমটি নীচে যেতে পারেন, তারপরে তাদের ভিতরে যান .. এবং আরও

— হেটেনাইন

আপনার যখন height: 0বা এর মতো অদ্ভুত উপাদান রয়েছে তখন মূল সমস্যাটি সফলভাবে সমাধানের একমাত্র উপায় height: 1। আমার ক্ষেত্রে, আমি পাওয়া কারণ Drupal এর 7 কোর একটি বীর 'অদৃশ্য' বর্গ ছিল: drupal.org/node/2664214

— geerlingguy

Answer 5

overflow-x: hidden; আমার জন্য নিখুঁত কাজ করে।

Answer 6

সমস্যাটি ফাইলটিতে রয়েছে:

style.css - লাইন 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

লাইনগুলি সরান:

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

এটি মূলত কেবল ফুটারকে একটি ছায়া গ্রেডিয়েন্ট দেয়। ফায়ারফক্সে এটি প্রথম লাইনই সমস্যা তৈরি করছে।

Answer 7

আমারও একই সমস্যা রয়েছে ( আইফোন সাফারিতে ওয়েবসাইটের বডি ব্যাকগ্রাউন্ড একটি ডান সাদা মার্জিন উপস্থাপন করে ) এবং খুঁজে পেয়েছি যে <html>ট্যাগটিতে ব্যাকগ্রাউন্ড ইমেজ যুক্ত করার ফলে সমস্যাটি স্থির হয়েছে।

আগে

body {background:url('images/back.jpg');}

পরে

html, body {background:url('images/back.jpg');}

Answer 8

স্পষ্টতই (-o-min-ডিভাইস-পিক্সেল অনুপাত: 3/2) সমস্যা তৈরি করছে। আমার পরীক্ষার সাইটে এটি ডান দিকটি কেটে ফেলার কারণ করছিল। আমি গিথুব এ একটি কাজের সন্ধান পেয়েছি যা আপাতত কাজ করে। (-O-min-ডিভাইস-পিক্সেল-অনুপাত: ~ "3/2") ব্যবহার করা ভাল মনে হচ্ছে।

Answer 9

আমি দেখতে পাচ্ছি যে প্রশ্নের উত্তরটি একটি সাধারণ স্ট্যান্ডার্ডে দেওয়া হয়েছে, কিন্তু আমি যখন আপনার সাইটের দিকে তাকালাম তখন আমি লক্ষ্য করেছি যে সেখানে এখনও একটি অনুভূমিক স্ক্রোল-বার রয়েছে। আমি এর কারণটিও লক্ষ করেছি: আপনি কোডটি ব্যবহার করেছেন:

.homepageconference .container {
padding-left: 12%;
}

কোডটি বরাবর ব্যবহার করা হচ্ছে এটি উল্লেখ করে যে উপাদানটির প্রস্থ 100% প্রস্থ রয়েছে যার ফলে স্ক্রিন আকারের 112% প্রস্থের মোট প্রস্থ রয়েছে causing এটির সমাধানের জন্য, হয় প্যাডিংটি সরিয়ে ফেলুন, একই প্রভাবের জন্য 12% এর মার্জিনের সাথে প্যাডিং প্রতিস্থাপন করুন বা উপাদানটির প্রস্থ (বা সর্বোচ্চ-প্রস্থ) 88% এ পরিবর্তন করুন। এটি 343 লাইনে মেইন সিএসএসে ঘটে Hope আশা করি এটি সাহায্য করে!

Comments

অথবা, box-sizingসম্পত্তি সেট করুন border-box।

— বেনপাই

Answer 10

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

সমস্ত দৃষ্টান্তের জন্য কাজ নাও করতে পারে, তবে আমি সম্প্রতি যে দৃশ্যে এসেছি তাতে সামগ্রীর উপাদানগুলিতে ওভারফ্লো লুকিয়ে রাখা কোনও সুযোগ ছিল না ...

Comments

ফায়ারফক্সের উপরের অংশে ভুতের উপাদান থেকে মুক্তি পেতে আমাকে html, শরীরের প্রস্থ: 0 সেট করতে হয়েছিল।

— গারাভানি

Answer 11

আমি আমার আইপ্যাডে ডানদিকে সাদা লাইনটি কেবল অনুভূমিক অবস্থানেই উপভোগ করছিলাম। আমি 960px প্রশস্ত এবং -999 এর জেড-ইনডেক্সের ব্যাকগ্রাউন্ড সেট করে একটি স্থির-অবস্থান ডিভ ব্যবহার করছিলাম। মিডিয়া ক্যোয়ারির কারণে এই নির্দিষ্ট ডিভটি কেবলমাত্র একটি আইপ্যাডে প্রদর্শিত হয়। এরপরে সামগ্রীটি 960px প্রশস্ত ডিভ র‍্যাপারে স্থাপন করা হয়েছিল। এই পৃষ্ঠায় প্রদত্ত উত্তরগুলি আমার ক্ষেত্রে সহায়তা করছে না। সাদা স্ট্রাইপ ইস্যু ঠিক করতে আমি কন্টেন্ট র‌্যাপারের প্রস্থটি 958px এ পরিবর্তন করেছি। Voila। অনুভূমিক অবস্থানে আইপ্যাডে আর কোনও সাদা ডান সাদা স্ট্রাইপ নেই।

Answer 12

এই প্রশ্নটি কিছুক্ষণ ধরেই ঝুলছে, তবে আমি যে কোনও স্থির সমাধান খুঁজে পাচ্ছিলাম না তার জন্য (আইপ্যাডের সাথে একই সমস্যা রয়েছে), তবে আমি নিজের সমাধানটি পরিচালনা করেছি যা বেশিরভাগ লোকদের জন্য কাজ করা উচিত যা আমি কল্পনা করি।

আমার কোডটি এখানে:

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

উপভোগ করুন!