'রূপান্তর 3d' অবস্থানের সাথে কাজ করছে না: স্থির শিশুরা children

Question

আমার একটি পরিস্থিতি আছে যেখানে, সাধারণ সিএসএস পরিস্থিতিতে একটি নির্দিষ্ট ডিভ ঠিক যেখানে নির্দিষ্ট করা হয় সেখানে অবস্থান করা হবে ( top:0px, left:0px)।

আমার যদি এমন কোনও পিতামাতাকে অনুবাদ 3 ডি রূপান্তরিত করে থাকে তবে এটি সম্মানিত বলে মনে হচ্ছে না। আমি কি কিছু দেখছি না? আমি অন্য ওয়েবকিট-ট্রান্সফর্মের মতো স্টাইল এবং রূপান্তর উত্স বিকল্পগুলি চেষ্টা করেছি তবে ভাগ্য হয়নি।

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

আপনি নীচের একটি সরল সংস্করণ সংস্করণ নীচে খুঁজে পেতে পারেন:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

আমি স্থির-অবস্থিত বাচ্চাদের সাথে কীভাবে অনুবাদ 3d কাজ করতে পারি?

Comments

: একই সমস্যা দিয়ে ফিল্টার খুব ঘটবে stackoverflow.com/q/52937708/8620333

— Temani আফিফ

Answer 1

এটি ডাব্লু 3 সি অনুসারেtransform একটি নতুন স্থানীয় সমন্বিত সিস্টেম তৈরি করে কারণ :

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

এর অর্থ স্থির অবস্থান ভিউপোর্টের পরিবর্তে পরিবর্তিত উপাদানের কাছে স্থির হয়ে যায়।

বর্তমানে এমন কোনও কাজের আশপাশ নেই যা সম্পর্কে আমি সচেতন।

এটি এরিক মেয়ারের নিবন্ধেও নথিভুক্ত করা হয়েছে: সিএসএস ট্রান্সফর্মগুলির সাথে আন-ফিক্সিং স্থির উপাদানগুলি ।

Comments

ধন্যবাদ, আমি লক্ষ্য করিনি যে আসল স্পেসিফিকেশনের সেই তথ্যটি ছিল ..... আমি অনুমান করি যে আমি গাণিতিক উত্তরের সমতুল্য পেয়েছি: "সংজ্ঞা অনুসারে" :)

— হুয়ান কার্লোস মোরেনো

@ আইএনটি, আমি মনে করি না যে এটির জন্য কোনও কাজ হবে না। কর্মক্ষেত্রগুলিকে অনুমতি না দেওয়ার জন্য একটি বড় ব্যবহারের কেস রয়েছে: ব্যবহারকারী প্রদত্ত ইনপুটটি তাদের মনোনীত ক্ষেত্রের বাইরে নিয়ন্ত্রণগুলি কভার করতে পারে (ভেবে দেখুন যে কোনও ক্ষতিকারক ইমেলটি জিমেইল সরঞ্জামদণ্ডে বিকল্প যুক্ত করে)) আপনি যদি এর ভিতর থেকে স্থির ব্যবহার করতে যাচ্ছেন তবে আপাতত রূপান্তরগুলি এড়াতে সবচেয়ে ভাল কাজ হবে।

— SAML

উইন্ডো.স্রোকল হাইট কাজ যা আছে তার সিএসএস শীর্ষ বৈশিষ্ট্যটি সেট করবে না? আপনার একে একে একে একে একে একে পুরোপুরি অবস্থান করতেও পারে, তবে এর মতো কিছু করণীয় হওয়া উচিত, না? (এখনই সত্যই পরীক্ষা করতে খুব অলস)

— ব্র্যাড ওরেগো

@ ব্র্যাডোরগো আপনি ঠিকই বলেছেন, আমি আমার ব্যবহৃত কোডটি যুক্ত করেছি।

— উজুমাকিদেভ

যতদূর আমি বলতে পারি এটি অনুমানের মধ্যে প্রবাহিত রয়েছে। বাগ 16328 দেখুন - "ধারণকৃত ব্লক" ব্যবহার CSS2.1 সংজ্ঞাটির সাথে মেলে না ।

— তৃতীয় দিন

Answer 2

পৃষ্ঠার আইটেমগুলি ট্রান্সফর্ম ব্যবহার করছিল তখন আমার ফিক্সিং ছিল আমার স্থির শীর্ষে এনএভিতে, নীচে আমার শীর্ষ নেভটিতে প্রয়োগ করা জাম্পিং / ঝাঁকুনির বিষয়টি সমাধান করেছে:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

এসও এই উত্তর ধন্যবাদ

Answer 3

ব্র্যাডোয়েরগো যেমন পরামর্শ দিয়েছেন ঠিক তেমন উইন্ডোটি scrollTopএনে একে একে পরম অবস্থানের উপরে যুক্ত করুন:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

এটি যাইহোক আমার জন্য কাজ করে।

Comments

এটি কাজ করে! তবে "উইন্ডো" তে আবদ্ধ হওয়ার পরিবর্তে, আমাকে স্ক্রলিংয়ের সাথে আবদ্ধ করতে হয়েছিল। এছাড়াও, নির্দিষ্ট উপাদান flickers।

— ট্রেন

এখানে jQuery এর কি করতে হবে?

— ফ্লোরিয়ানবি

এটি এটি করতে পারত, তবে @ ট্রেনের কথা যেমন উল্লেখ করা হয়েছে, তেমনি এগুলিও ঝাপটায়।

— এটিয়েন ডুপুইস

হ্যাঁ, এটি আমার ব্যবহারের জন্য পর্যাপ্ত পরিচ্ছন্ন হওয়ার জন্য পর্যাপ্ত দ্রুত আপডেট হয় না: - / ভাল ধারণা থি

— রিড ১৯

এটি খুব খারাপ অনুশীলন,

— জেএস-এর

Answer 4

ফায়ারফক্স এবং সাফারিতে আপনি এর position: sticky;পরিবর্তে ব্যবহার করতে পারেন position: fixed;তবে এটি অন্যান্য ব্রাউজারগুলিতে কাজ করবে না। তার জন্য আপনার জাভাস্ক্রিপ্ট দরকার।

Comments

স্টিকি পজিশনিং আপেক্ষিক এবং স্থির অবস্থানের একটি সংকর এবং এটি সত্যিই পরীক্ষামূলক , আমি এটি এড়াতে অত্যন্ত পরামর্শ দিচ্ছি, কারণ এটি এখনও স্ট্যান্ডার্ড নয়।

— ফরাসাইড

ফায়ারফক্স এবং সাফারিতে আফাইক আপনি কেবল ব্যবহার করতে পারেন position:fixedএবং এটি যেভাবেই প্রত্যাশা মতো কাজ করবে।

— অরিয়াদাম

@ ওরিয়াদম না, যখন পিতা-মাতা অনুবাদ 3 ডি ব্যবহার করেন এবং কিছু ক্ষেত্রে বাচ্চাদের স্থির অবস্থানটি ঘুরে বেড়ায় তখন আমার সমস্যা হয়। stickyএটি ইতিমধ্যে বড় ব্রাউজারগুলির দ্বারা সমর্থিত অবস্থায় ব্যবহার করার চেষ্টা করবে : caniuse.com/#feat=css-sticky

— Lukas Liesis

stickyএটি একটি সমাধান হতে পারে, এটি আধুনিক ব্রাউজারে কাজ করে।

— aboutqx

Answer 5

আমার মতে, এটির সাথে মোকাবিলা করার সর্বোত্তম পদ্ধতিটি হ'ল একই অনুবাদটি প্রয়োগ করা, তবে যেসব বাচ্চাদের তাদের পিতামাতার (অনুবাদকৃত) উপাদান থেকে স্থির করা দরকার তাদের বিরতি দিন; এবং তারপরে র্যাপারের ভিতরে কোনও position: fixedডিভিতে অনুবাদটি প্রয়োগ করুন ।

ফলাফলগুলি এরকম কিছু দেখাচ্ছে (আপনার ক্ষেত্রে):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

জেএসফিডাল: https://jsfiddle.net/hju4nws1/

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

Answer 6

আমি একই সমস্যা জুড়ে দৌড়ে। পার্থক্যটি হ'ল 'পজিশন: ফিক্সড' সহ আমার উপাদানটির 'শীর্ষ' এবং 'বাম' শৈলীর বৈশিষ্ট্যগুলি জেএস থেকে সেট করা ছিল। সুতরাং আমি একটি স্থির প্রয়োগ করতে সক্ষম হয়েছি:

var oRect = oElement.getBoundingClientRect();

oRect অবজেক্টটিতে রিয়েল (পোর্ট দেখার সাথে সম্পর্কিত) শীর্ষ এবং বাম স্থানাঙ্ক থাকবে। সুতরাং আপনি আপনার আসল oElement.style.top এবং oElement.style.left বৈশিষ্ট্যগুলি সামঞ্জস্য করতে পারেন।

Comments

এটি আই ও ক্রোমে কাজ করে তবে অ্যান্ড্রয়েড স্ট্যান্ডার্ড ব্রাউজারে নয়। বামটি একটি সংখ্যা তবে এটি সর্বদা 0

— অ্যাডাপ্টবি

Answer 7

আমার কাছে অফ ক্যানভাসের সাইডবার রয়েছে যা -বিবিতিট-ট্রান্সফর্ম: ট্রান্সলেটড 3 ডি ব্যবহার করে। এটি আমাকে পৃষ্ঠায় একটি নির্দিষ্ট পাদচরণ স্থাপন করা থেকে বিরত ছিল। আমি এইচটিএমএল পৃষ্ঠায় এমন একটি শ্রেণিকে লক্ষ্যবস্তু করে সমাধান করেছি যা সাইডবারের সূচনাতে ট্যাগটিতে যুক্ত করা হয়েছে এবং তারপরে একটি সিএসএস লিখে: "ওয়েবেকিট-ট্রান্সফর্ম: কিছুই নয়!" এইচটিএমএল ট্যাগে যখন শ্রেণিটি এইচটিএমএল ট্যাগে উপস্থিত না থাকে। আশা করি এটি একই সমস্যার সাথে সেখানে কাউকে সহায়তা করবে!

Answer 8

সন্তানের উপাদানগুলিতে বিপরীত রূপান্তর প্রয়োগ করার চেষ্টা করুন:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Answer 9

উপাদানটি রূপান্তরিত করার সময় একটি গতিশীল শ্রেণি যুক্ত করুন।$('#elementId').addClass('transformed')। তারপরে সিএসএসে ঘোষণা করতে যান,

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

তারপর

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

তারপর

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

এখন position: fixedযখন সন্তানের উপাদানগুলিতে একটি topএবং z-indexসম্পত্তির মান সরবরাহ করা হয় ঠিক তখনই সূক্ষ্মভাবে কাজ করুন এবং পিতামাতার উপাদান রূপান্তর না হওয়া পর্যন্ত স্থির থাকুন। রূপান্তরটি যখন উল্টানো হয় ততক্ষণে শিশু উপাদানটি ঠিক হয়ে যায় pop এই পরিস্থিতিটি সহজ করা উচিত যদি আপনি আসলে কোনও নেভিগেশন সাইডবার ব্যবহার করেন যা টগল করে খোলা থাকে এবং ক্লিকের পরে বন্ধ হয়ে যায় এবং আপনি পৃষ্ঠাটি নীচে স্ক্রোল করার সাথে সাথে আপনার কাছে একটি ট্যাব-সেট থাকে stick

Answer 10

এটির সাথে মোকাবিলা করার একটি উপায় হ'ল স্থির উপাদানটিতে একই রূপান্তরটি প্রয়োগ করা:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Comments

আইই

— বাগটিতে