আইওএস 11 সাফারি বুটস্ট্র্যাপ মডেলের পাঠ্য অঞ্চল কার্সারের বাইরে

85

আইওএস 11 সাফারি দিয়ে, ইনপুট পাঠ্য বাক্সের কার্সার ইনপুট পাঠ্যবাক্সের বাইরে। কেন এই সমস্যা হচ্ছে তা আমরা পাইনি। আপনি দেখতে পাচ্ছেন যে আমার ফোকাসযুক্ত পাঠ্য বাক্সটি ইমেল পাঠ্য ইনপুট তবে আমার কার্সারটির বাইরে। এটি কেবল আইওএস 11 সাফারি দিয়েই ঘটে

সমস্যা

html  ios  bootstrap-modal  mobile-safari  ios11 
— কেক্কেমে
সূত্র
4
এটি সাফারি সহ একটি বাগ। অ্যাপল এটি অভ্যন্তরীণভাবে স্থির করেছে তবে এই ফিক্সটি এখনও জনসাধারণের (বা এমনকি বিটা) আইওএস প্রকাশের মধ্যে নেই। bugs.webkit.org/show_bug.cgi?id=176896
— বিটল

উত্তর:

69

position:fixedকোনও মডেল খোলার সময় আমি শরীরে যুক্ত করে বিষয়টি ঠিক করেছি । আশা করি এটা তোমাকে সাহায্য করবে।

— নত্তাওয়াত তারভিসরিপায়াপ
সূত্র
6
নীচের উত্তরগুলির জন্য নোট করুন - বুটস্ট্র্যাপ মোডাল খোলা থাকলে শরীরে আধুনিক-ওপেন যুক্ত করে, যাতে আপনি কেবল অবস্থান যুক্ত করতে পারেন: class শ্রেণিতে স্থির।
— টিমমাইক
4
width:100%দেহের প্রস্থকে ডিভাইসের প্রস্থে সীমাবদ্ধ করতে আপনাকে যুক্ত করতেও হতে পারে । কিছু ক্ষেত্রে, বিদ্যমান মার্কআপের উপর নির্ভর করে, এটি একটি সমস্যা হতে পারে। আমি @ এজেন্টলবয়ের (নীচে) সমাধানটিও পছন্দ করি যাতে সমস্যা ছাড়াই অন্যান্য ব্রাউজারগুলিকে শাস্তি না দেওয়া হয়, কারণ শরীরকে স্থির করে দেওয়ার সময় শরীরটি শীর্ষে স্ক্রোল করে দেয় যা কিছুটা বিরক্তিকর।
— রেডটোপিয়া
আশ্চর্যের বিষয় হল, আমার কাছে এই সমস্যাটি উল্কার-কর্ডোভা নিয়ে একটি অ্যাপ্লিকেশন বিল্ড নিয়ে ছিল। দেখে মনে হয়েছিল যে কোনও আইওএস ডিভাইসে ভি 11 + চলছে এটিতে এই সমস্যাটি রয়েছে। আমার ক্ষেত্রে আমি ইতিমধ্যে position:fixedঅ্যাপ্লিকেশনটির বডিতে আবেদন করেছিলাম । এর পরিবর্তে আমি এটি পরিবর্তিত position:absoluteউপর htmlউপাদান এবং এটা আমার সমস্যা সমাধান করা হয়েছে। ধন্যবাদ জেন!
— অ্যাডাম রস
4
এটি আমাদের জন্য মডেল ফর্মগুলির শেষ হতে পারে। এমনকি অ্যাপল যদি সমস্যাটি স্থির করে, তবে কার্যকারী ফর্মটি দেখতে তাদের ডিভাইস আপডেট করার বিষয়টি ব্যবহারকারীদের উপর নির্ভর করবে। এটিকে ঠিক করার কোনও সহজ সার্বজনীন উপায় নেই? পলি ফিল কি হবে?
— 26
4
আপনি আমার জীবন বাঁচিয়েছিলেন <3
— ক্রিশ্চিয়ান বি।
42

ব্যক্তিগতভাবে position: fixed স্বয়ংক্রিয়ভাবে শীর্ষে স্ক্রোল করুন । বেশ বিরক্তিকর!

অন্যান্য ডিভাইস এবং সংস্করণগুলিকে শাস্তি দিতে এড়াতে আমি এই আইওএসের উপযুক্ত সংস্করণগুলিতে এই ফিক্সটি প্রয়োগ করি।

** সংস্করণ 1 - সমস্ত মডেল ঠিক করা **

জাভাস্ক্রিপ্ট / jQuery জন্য

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

সিএসএসের জন্য

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

** সংস্করণ ২ - শুধুমাত্র নির্বাচিত মডেলগুলি **

আমি কোনও ক্লাস সহ কেবলমাত্র নির্বাচিত মডেলের জন্য ফাংশনটি ফায়ার করার জন্য পরিবর্তন করেছি .inputModal

শীর্ষে স্ক্রোল এড়াতে কেবল ইনপুটগুলির সাথে থাকা মডেলগুলিকেই প্রভাবিত করা উচিত।

জাভাস্ক্রিপ্ট / jQuery জন্য

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

সিএসএসের জন্য

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

HTML- এর জন্য শ্রেণী যোগ inputModal মোডাল করতে

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>

জাভাস্ক্রিপ্ট ফাংশন নোটার এখন স্ব-উদ্দীপনা

** আপডেট আইওএস 11.3 - বাগ সংশোধন করা হয়েছে **

আইওএস 11.3 হিসাবে, বাগটি সংশোধন করা হয়েছে। OS 11_ইন পরীক্ষা করার দরকার নেইiOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

তবে সাবধান হন আইওএস 11.2 এখনও ব্যাপকভাবে ব্যবহৃত হয় (এপ্রিল 2018 হিসাবে)। দেখা

স্ট্যাট 1

স্ট্যাট 2

— micaball
সূত্র
4
ভাল পরামর্শ। আমার এই সমস্যাটি নেই তবে আমি অনুমান করি এটি উত্তর হিসাবে বিশ্বব্যাপী হতে পারে। আমি আমার বিয়ারগুলি শেষ করার পরে এটিকে যুক্ত করব
— মাইক্রাবল
4
@ এজেন্টবয় কেন কোনও ওএস 11 খুঁজে পেতে কোনও রেগেক্স ব্যবহার করবেন না? সুতরাং আপনি আপনার কোডে প্রতিটি ওএস 11 আপডেট আপডেট করতে হবে না? এর মতো কিছুiOS11 = /OS 11_(\d{1,2})(_{0,1})(\d{1,2})/.test(us);
— টি। ইভান্স
4
@ রোনাককে দেখে মনে হচ্ছে এটি এখনও বিটা ১১.২ এবং ১১.৩-তে রয়েছে বগস.ওয়েবকিট.আর.গ্রাফিক্স
— মাইকাবল
4
@ টি.এভানস যে রেজেক্স কাজ করে না। একটি সঠিক রেজেক্স এমন কিছু হতে পারে:ios11 = /OS 11_(\d{1,2})/.test(ua);
— আব্রাহাম
4
স্থির অবস্থানটি এখনও নথির / বডি স্ক্রোলটিকে শীর্ষে নিয়ে যাবে। আমি মডেল বন্ধ হয়ে গেলে মডেল ওপেন এবং রিড স্ক্রোলটপ মানটিতে বর্তমান স্ক্রোলটপ অবস্থান দখল করার পরামর্শ দিই। এই ভালো লেগেছে jsfiddle.net/im4aLL/hmvget9x/1
— হাদি
15

এই সমস্যাটি বুটস্ট্র্যাপের বাইরে এবং কেবল সাফারি ছাড়িয়ে। এটি আইওএস 11-এ একটি সম্পূর্ণ ডিসপ্লে বাগ যা সমস্ত ব্রাউজারে ঘটে। উপরের ফিক্সটি সমস্ত ক্ষেত্রে এই সমস্যাটিকে ঠিক করে না।

বাগটি এখানে বিশদ বিবরণে জানানো হয়েছে:

https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

সম্ভবত তারা এটি ইতিমধ্যে বাগ হিসাবে রিপোর্ট করেছেন to

— এরিক শন
সূত্র
এটি আমার কাছে সমস্যা বলে মনে হচ্ছে, আইওএস ১১-এ আপডেট করার আগে ঠিকঠাক কাজ করছিল অ্যান্ড্রয়েড ব্যবহারকারীরা সমস্যা হচ্ছেন না।
— হ্যাকিং কেমিস্ট
11

হতাশ বাগ, এটি সনাক্ত করার জন্য ধন্যবাদ। অন্যথায়, আমি আমার আইফোন বা প্রাচীরের বিরুদ্ধে মাথা ঠেকিয়ে যাব।

সহজতম সমাধান (কোড পরিবর্তনের 1 লাইন):

এইচটিএমএল বা একটি বাহ্যিক সিএসএস ফাইলে কেবল নিম্নলিখিত সিএসএস যুক্ত করুন।

<style type="text/css">
.modal-open { position: fixed; }
</style>

এখানে একটি পরিপূর্ণ কাজের উদাহরণ:

.modal-open { position: fixed; }
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
স্নিপেট প্রসারিত করুন

আমি এখানে একটি সমস্যা জমা দিয়েছি: https://github.com/twbs/bootstrap/issues/24059

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

সবচেয়ে সহজ / পরিষ্কার সমাধান:

body.modal-open { position: fixed; width: 100%; }
— lfkwtz
সূত্র
4
এটি সবচেয়ে সহজ সমাধান এবং এটি কাজ করে তবে একমাত্র সমস্যা হ'ল কার্সার পুরোপুরি অদৃশ্য হয়ে যায়। এটি প্রাথমিক পরিস্থিতির মতো খারাপ নয়, তবে ব্যবহারের সমস্যা আছে।
— tmo256
অদ্ভুত, আমি অদৃশ্য হয়ে যাওয়া কার্সারের অভিজ্ঞতা
— পাইনি
4
আমি অদৃশ্য হয়ে যাওয়া কার্সারের অভিজ্ঞতাও পেয়েছি, কেন এমন হতে পারে এমন কোনও চিন্তা?
— অ্যালেক্স বার্গোস
4
হ্যাঁ, আমি কেবল প্রথম ফোকাস ইভেন্টের জন্য একটি অদৃশ্য কার্সরও দেখছি। পরবর্তী ইনপুট ফোকাসে কার্সার উপস্থিত হয়। খুব অদ্ভুত. এটি কেবল আইওএস-এ সাফারিতে ঘটছে।
— ডেভিন ওয়াকার 1
@ ডেভিনিওয়াকার আপনি কি ছেলেরা কখনও অদৃশ্য হয়ে যাওয়া কার্সর ইস্যু সমাধান করেছেন?
— অনুদান দিন
3

আইওএস 11.3 এ আপনার অ্যাপল ডিভাইসগুলি আপডেট করার পরে এই সমস্যাটি আর পুনরায় উত্পাদনযোগ্য নয়

— ইশান
সূত্র
আপনার অর্থ কী, অ্যাপল এটি ঠিক করে দিয়েছে?
— স্টারসক্রিম
4
@ স্টারসক্রিম হ্যাঁ এটি অ্যাপল দ্বারা এই সফ্টওয়্যার সংস্করণ (আইওএস 11.3) দিয়ে ঠিক করা হয়েছে
— ইশান
2

যোগ position: fixed;করার জন্য bodyযখন মোডাল খোলা আছে।

$(document).ready(function($){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
    $("#myModal").on('show.bs.modal', function () {
        $('body').addClass('body-fixed');
    });
    $("#myModal").on('hide.bs.modal', function () {
        $('body').removeClass('body-fixed');
    });
});
.body-fixed {
    position: fixed;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Form</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="control-label">Input #1</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #2</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #3</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #4</label>
					<input type="text" class="form-control">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
স্নিপেট প্রসারিত করুন

— অনুরুক এস।
সূত্র
4
এই থ্রেডের অন্যান্য সমাধানগুলির মতো, একবার মডেলগুলি বন্ধ হয়ে যায় - আপনি আবার শীর্ষে ফিরে এসেছেন। উদাহরণস্বরূপ: আইটেমগুলির গ্রিডের মাধ্যমে ব্যবহারকারী স্ক্রল করে, কোনও মডেলে বিশদ প্রবর্তন করে .. এবং এই ফিক্সটি সহ, যখন তারা
— মডেলটি
4
আমার আইফোন plus
— প্লাসে
1

কাজের position: fixedভিত্তিতে এই সমাধানগুলি ব্যবহার করে এবং অবস্থান সংশোধন করা scrollTopসত্যই ভাল হয় তবে কিছু লোক (আমাকে সহ) আরও একটি সমস্যা পেয়েছিল: কীবোর্ড ক্যারেট / কার্সারটি ইনপুটগুলিতে ফোকাস করা না দেখায় showing

আমি লক্ষ্য করেছি যে ক্যারেট / কার্সার তখনই কাজ করে যখন আমরা শরীরে ব্যবহার করব নাposition: fixed । তাই কয়েকটি জিনিস চেষ্টা করার পরে, আমি এই পদ্ধতির ব্যবহার করে ছেড়ে দিল এবং ব্যবহার করার সিদ্ধান্ত নিয়েছে position: relativeউপর bodyব্যবহার এবং scrollTopসঠিক মোডাল শীর্ষ অবস্থানে পরিবর্তে।

নীচে কোড দেখুন:

var iosScrollPosition = 0;

function isIOS() {
   // use any implementation to return true if device is iOS
}

function initModalFixIOS() {
    if (isIOS()) {
        // Bootstrap's fade animation does not work with this approach
        // iOS users won't benefit from animation but everything else should work
        jQuery('#myModal').removeClass('fade');
    }
}

function onShowModalFixIOS() {
    if (isIOS()) {
        iosScrollPosition = jQuery(window).scrollTop();
        jQuery('body').css({
            'position': 'relative', // body is now relative
            'top': 0
        });
        jQuery('#myModal').css({
            'position': 'absolute', // modal is now absolute
            'height': '100%',
            'top': iosScrollPosition // modal position correction
        });
        jQuery('html, body').css('overflow', 'hidden'); // prevent page scroll
    }
}

function onHideModalFixIOS() {
    // Restore everything
    if (isIOS()) {
        jQuery('body').css({
            'position': '',
            'top': ''
        });
        jQuery('html, body').scrollTop(iosScrollPosition);
        jQuery('html, body').css('overflow', '');
    }
}

jQuery(document).ready(function() {
    initModalFixIOS();
    jQuery('#myModal')
        .on('show.bs.modal', onShowModalFixIOS)
        .on('hide.bs.modal', onHideModalFixIOS);
});
— ফ্লাভিওস্কোবার
সূত্র
0

পূর্বে উল্লিখিত হিসাবে: সেটিং style.position propertyএর bodyজন্য fixedসমাধান iOS cursor misplacementসমস্যা।

যাইহোক, এই লাভটি পৃষ্ঠার শীর্ষে জোর করে স্ক্রোল করা ব্যয় করে আসে।

সৌভাগ্যবসত, এই নতুন UXসমস্যা উপজীব্য করে অনেক ওভারহেড ছাড়া অস্বীকার করা যাবে HTMLElement.styleএবং window.scrollTo()।

মৌলিক সূচনাটি হ'ল উপাদানটির কখন scroll to topব্যবহার করে তা মোকাবেলা করা । এটি ভেরিয়েবল দ্বারা ক্যাপচার করা মান ব্যবহার করে করা হয় ।bodystyle.topmountingYOffsetygap

সেখান থেকে এটি সহজেই পুনরায় সেট body's style.topকরা 0এবং window.scrollTo(0, ygap)কখন ব্যবহারকারীর দৃষ্টিভঙ্গিটি পুনঃনির্মাণের বিষয় dismounting।

ব্যবহারিক উদাহরণের জন্য নীচে দেখুন।

// Global Variables (Manage Globally In Scope).
const body = document.querySelector('body') // Body.
let ygap = 0 // Y Offset.


// On Mount (Call When Mounting).
const onModalMount = () => {

  // Y Gap.
  ygap = window.pageYOffset || document.documentElement.scrollTop

  // Fix Body.
  body.style.position = 'fixed'

  // Apply Y Offset To Body Top.
  body.style.top = `${-ygap}px`

}


// On Dismount (Call When Dismounting).
const onModalDismount = () => {

  // Unfix Body.
  body.style.position = 'relative'

  // Reset Top Offset.
  body.style.top = '0'

  // Reset Scroll.
  window.scrollTo(0, ygap)

}
— আরমান চরণ
সূত্র
আপনার কি এর জন্য আরও বিশদ উদাহরণ রয়েছে? আমি অনুমান করছি যে মোডালটি খোলার সময় ডাকা হবে এমন একটি ফাংশনে আমার মাউন্ট থাকবে এবং তারপরে একটি ফাংশনটিতে ডিসমাউন্ট রাখুন এবং মোডালটি বন্ধ হয়ে গেলে কল করুন।
— নিল জোন্স
আঃ হাঁ আমি বুঝছি তুমি কি বলতে চাও. সংশোধিত সমাধানের জন্য দয়া করে উপরে দেখুন। এছাড়াও; হ্যাঁ অভিপ্রায় আপনি ঐ কল করার জন্য functionsযখন mountingএবং dismounting। ধন্যবাদ
— আরমান চরণ
-1

ইনসায়েস করে যে কেউ আইওএস> ১১.২ এ কাজ করে এমন ভ্যানিলা জেএসের কোনও স্থির সন্ধান করছে এবং এর জন্য কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই:

(function() {
    if (!/(iPhone|iPad|iPod).*(OS 11_[0-2]_[0-5])/.test(navigator.userAgent)) return

    document.addEventListener('focusin', function(e) {
        if (!e.target.tagName == 'INPUT' && !e.target.tagName != 'TEXTAREA') return
        var container = getFixedContainer(e.target)
        if (!container) return
        var org_styles = {};
        ['position', 'top', 'height'].forEach(function(key) {
            org_styles[key] = container.style[key]
        })
        toAbsolute(container)
        e.target.addEventListener('blur', function(v) {
            restoreStyles(container, org_styles)
            v.target.removeEventListener(v.type, arguments.callee)
        })
    })

    function toAbsolute(modal) {
        var rect = modal.getBoundingClientRect()
        modal.style.position = 'absolute'
        modal.style.top = (document.body.scrollTop + rect.y) + 'px'
        modal.style.height = (rect.height) + 'px'
    }

    function restoreStyles(modal, styles) {
        for (var key in styles) {
            modal.style[key] = styles[key]
        }
    }

    function getFixedContainer(elem) {
        for (; elem && elem !== document; elem = elem.parentNode) {
            if (window.getComputedStyle(elem).getPropertyValue('position') === 'fixed') return elem
        }
        return null
    }
})()

এটি যা করে তা হ'ল:

  1. ব্রাউজারটি আইওএস 11.0.0 - 11.2.5 এ সাফারি কিনা তা পরীক্ষা করুন
  2. focusinপৃষ্ঠায় কোনও ইভেন্টের জন্য শুনুন
  3. যদি ফোকাসযুক্ত উপাদানটি একটি inputবা একটি হয় textareaএবং fixedঅবস্থানের সাথে কোনও উপাদানগুলিতে থাকে তবে কনটেইনার অবস্থানটি absoluteসম্পর্কিত scrollTopএবং ধারকগুলির মূল মাত্রা পরিবর্তন করুন।
  4. অস্পষ্ট অবস্থায়, ধারকটির অবস্থানে পুনরুদ্ধার করুন fixed।
— ম্যানুয়েল অটো
সূত্র
-1

এই সমাধানটি আইওএসের সমস্ত ব্রাউজার জুড়ে আমার এবং এর জন্য কাজ করে।

.safari-nav-force{
/* Allows content to fill the viewport and go beyond the bottom */
height: 100%;
overflow-y: scroll;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
}

জাভস্ক্রিপ্ট

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
$('.modal').on('shown.bs.modal', function () {
    if (iOS && $('.modal').hasClass('in')){
        $('html,body').addClass('safari-nav-force');
    }
});
$('.modal').on('hidden.bs.modal', function () {
    if (iOS && !$('.modal').hasClass('in')){
        $('html,body').removeClass('safari-nav-force');
    }
});
— আফজাল খালিদ
সূত্র
-2

মোডাল CSS ওভাররাইড করতে ও তার পরিবর্তন positionথেকে fixedথেকেabsolute

.modal {
position: absolute !important;
}
— ড্যান
সূত্র
4
আমার দৃশ্যে কাজ করেনি। স্থির থেকে স্থির পরিবর্তনগুলি এর প্রভাবগুলিতে
— স্টিভ ডি
@ স্টিভেডি - এটি কাজ করতে আপনার মোডাল <body> এ যুক্ত করা উচিত। এবং <body> এর থাকা উচিত - অবস্থান: আপেক্ষিক। এবং যখন এটি কাজ করা উচিত :)
— ড্যান
-3

# মডেল পজিশনে যুক্ত করুন: পরম এটি অবস্থান সম্পর্কিত ভবিষ্যতের সমস্যাগুলি স্থির করে: স্থির

— করলা
সূত্র
আপনার উত্তর হুবহু সদৃশ। সদৃশ উত্তর পোস্ট না করে তা নিশ্চিত করুন।
— MechMK1
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.