ওয়েবেকিট-ট্রান্সফর্ম ব্যবহার করার সময় স্থির অবস্থানগুলি কার্যকর হয় না

Question

আমি একটি ডিভটি ঘোরানোর জন্য -webkit-transform (এবং -moz-transform / -o-transform) ব্যবহার করছি। ব্যবহারকারীর সাথে ডিভ স্ক্রোল ডাউন করার সাথে সাথে পজিশন যুক্তও স্থির করুন।

ফায়ারফক্সে এটি দুর্দান্ত কাজ করে তবে ওয়েবকিট ভিত্তিক ব্রাউজারগুলিতে এটি ভেঙে যায়। -ওয়েবেকিট-ট্রান্সফর্ম ব্যবহার করার পরে, স্থির অবস্থানটি আর কাজ করে না! কীভাবে সম্ভব?

Comments

একটি ডেমো পৃষ্ঠা প্রায়শই লোকদের প্রশ্নের উত্তর দিতে সহায়তা করে - jsbin.com আপনি যদি নিজের সাইটে লিঙ্ক না করতে চান তবে সমস্যাটি চিত্রিত করতে অস্থায়ী পৃষ্ঠাগুলি তৈরি করতে দেয়।

— ধনী ব্র্যাডশো

অস্থায়ী সম্পাদনা বিনের আরও ভাল উদাহরণ jsfiddle.net।

— কাইল

@ রিচ ব্র্যাডশো jsbin.com খুব সুন্দর। এখনও অবধি জানা ছিল না। আমার বেশিরভাগ প্রকল্পগুলি আমি স্থানীয়ভাবে চালিত করি, তাই আমি এটি পরের বার ব্যবহার করব। Tnx

— iSenne

এটি ফায়ারফক্সে মোটেই ঠিক কাজ করে না ।

— vsync

এখনও 2017 সালে একটি ইস্যু See মনে হচ্ছে তারা এখনও "এটি একটি বৈশিষ্ট্য নয় এটি একটি বৈশিষ্ট্য!" যুক্তি ...

— সর্বোচ্চ

Answer 1

কিছু গবেষণা করার পর, একটা হয়েছে বাগ রিপোর্ট উপর ক্রোমিয়াম এই সমস্যা সম্পর্কে ওয়েবসাইট, এ পর্যন্ত ওয়েবকিট ব্রাউজার একই সময়ে একসঙ্গে এই দুই প্রভাব রেন্ডার করতে পারবে না।

আমি আপনার স্টাইলশীটে কিছু ওয়েবকিটকে কেবল সিএসএস যুক্ত করার এবং রূপান্তরিত ডিভটিকে একটি চিত্র তৈরি করার এবং এটিকে ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করার পরামর্শ দিচ্ছি।

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

ওয়েবকিট ব্রাউজারগুলি এফএফ পর্যন্ত না পাওয়া পর্যন্ত এখনকার জন্য আপনাকে এটি পুরানো ধাঁচে করতে হবে।

সম্পাদনা: 10/24/2012 পর্যন্ত বাগটি সমাধান করা হয়নি।

---

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

Comments

আরও বছর পরে, এখনও সমাধান হয়নি। বেশ দুঃখজনক.

— অমলগোভিনাস

এই উত্তর অনুসারে এটি কোনও বাগ নয়, বরং অনুমানের অংশ।

— মাইকেলরশটন

ফিরে বসে দেখুন - আমি বাজি

— ধরছি

আগস্ট 30, 2017, অধিনায়কের লগ। আমরা অদ্ভুত বিপর্যয়ের মুখোমুখি হয়েছি, যা অনেক আগেই অন্যান্য অধিনায়করা বর্ণনা করেছিলেন। একটি সমাধান এখনও কার্যকর করা হয়।

— ই

এটি আমার বাবার বাবা আমাকে সতর্ক করেছিলেন।

— danjones_mcr

Answer 2

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

একই উপাদান প্রয়োগ করার সময় তারা কাজ করে; উপাদানটি স্থির হিসাবে স্থাপন করা হবে এবং তারপরে রূপান্তরিত হবে।

Comments

এটিই একমাত্র সহায়ক এবং সঠিক উত্তর। অভিভাবক উপাদানটির অনুবাদ বন্ধ করুন এবং স্থির উপাদানটির অংশ যেখানে থাকা শিশুদের অনুবাদ করুন। : এখানে আমার বেহালার এর JSFIDDLE

— ফাল্ক

এবং আমি যদি একটি নির্দিষ্ট উপাদানকেও রূপান্তর করতে চাই?

— মার্ক

Answer 3

ব্যাকগ্রাউন্ড-সংযুক্তিযুক্ত একই সমস্যার কারণে যার ব্যাকগ্রাউন্ড চিত্রগুলি খুঁজে পায় তারা ক্রোমে অদৃশ্য হয়ে যাচ্ছেন: স্থির; - এটি আমার সমাধান ছিল:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Answer 4

position:stickyপরিবর্তে আমার জন্য কাজ করা কিছু (কিছুটা হ্যাকি) হ'ল :

.fixed {
     position: sticky;
}

Comments

updates.html5rocks.com/2012/08/... হাঁ অই .. কিন্তু ভাল সমর্থিত নয় এখনো মনে হয়

— coiso

স্টিকি আলাদা। মূল সমস্যাটি হ'ল স্থির করে আমরা ধারকটির অবস্থান উপেক্ষা করতে চাই (খুব দরকারী op ভয়ঙ্কর।

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

Answer 5

আগস্ট 2016 এবং স্থির অবস্থান এবং অ্যানিমেশন / রূপান্তর এখনও একটি সমস্যা। আমার জন্য একমাত্র সমাধান যা কাজ করেছিল - তা হল শিশু উপাদানটির জন্য একটি অ্যানিমেশন তৈরি করা যাতে বেশি সময় লাগে।

Comments

নতুন প্রশ্নের উত্তর দিন। যে প্রশ্নগুলি 2010 সালে প্রশ্ন জিজ্ঞাসা করেছিলেন তার চেয়ে এই প্রশ্নগুলির আপনার বেশি প্রয়োজন They তারা এখনই সমস্যার সমাধান করে ফেলেছে আপনি কি ভাবেন না? এছাড়াও এই প্রশ্নের ইতিমধ্যে একটি স্বীকৃত উত্তর রয়েছে।

— উমাইর ফারুক

নাঃ! এটি এখনও একটি সমস্যা ... যে ব্যক্তি প্রশ্নটি জিজ্ঞাসা করেছিল সে হয়ত আরও একটি সমাধান খুঁজে পেয়েছিল - তবে আমি এই থ্রেডটি একটি কারণে পেয়েছি।

— Defligra

তোমার ইচ্ছা. লোকেরা প্রথম প্রশ্নগুলি পর্যালোচনা করার সময় আমি এই মন্তব্যটি রেখেছি। এবং যেহেতু আপনি ঠিক আজ যোগদান করেছেন এবং এটি ছিল আপনার প্রথম উত্তর এবং দেরী উত্তরও তাই আমি এই মন্তব্যটি রেখেছি। আমি ডাউনভোট করিনি। আপনার জন্য এটি একটি ভাল সুযোগ।

— উমাইর ফারুক

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

— কোমাহ

Answer 6

আসলে আমি এই "বাগ" ঠিক করার জন্য অন্য একটি উপায় খুঁজে পেয়েছি:

আমার কাছে ধারক উপাদান রয়েছে যা সিএসএস 3 অ্যানিমেশন সহ পৃষ্ঠাটি ধারণ করে। পৃষ্ঠাটি অ্যানিমেশনটি শেষ করার পরে, CSS3 বৈশিষ্ট্যের মান রয়েছে: রূপান্তর: অনুবাদ করুন (0,0);। সুতরাং, আমি সবেমাত্র এই লাইনটি সরিয়েছি, এবং সবকিছু যেমনটি করা উচিত ঠিক তেমন কাজ করেছে - অবস্থান: স্থির সঠিকভাবে প্রদর্শিত হয়। পৃষ্ঠা অনুবাদ করার জন্য যখন CSS শ্রেণি প্রয়োগ করা হয় তখন অনুবাদ সম্পত্তি যুক্ত হয় এবং CSS3 অ্যানিমেশনটিও কাজ করে।

উদাহরণ:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

ডেমো: http://jsfiddle.net/ZWcD9/

Comments

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

— অমলগোভিনাস

রূপান্তরটি অপসারণ, যে কোনও উপায়ে সম্ভবত এখন অবধি সেরা কাজ। ফিড-ইন-এর মতো কিছু, একবার সম্পূর্ণ হয়ে গেলে, উপাদানটির উপস্থিতি প্রভাবিত না করে অপসারণযোগ্য should প্রকৃতপক্ষে, আমি নিশ্চিত নই যে ট্রান্সফর্মএক্স (0) এর সাথে ঝুলতে পারফর্মেন্স উপস্থাপনের জন্য কি করবে, কিছু হলে; এটি হয় উপেক্ষা করা যেতে পারে, বা কর্মক্ষমতা ক্ষতি করতে পারে, বা 3D ত্বরণ কিছু ধরণের জোর করে এটি আরও ভাল করতে পারে। কে জানে. যে কোনও ক্ষেত্রে, একবার অ্যানিমেশনটি সম্পূর্ণ হয়ে গেলে, বা এটিতে কোনও নির্দিষ্ট উপাদান যুক্ত হওয়ার ঠিক আগেই, কেউ কেবল রূপান্তরটির জন্য সিএসএস ক্লাসগুলি সরাতে পারে।

— ট্রায়ঙ্কো

Answer 7

আমার ফোনগ্যাপ প্রকল্পে ওয়েবকিট ট্রান্সফর্ম-ওয়েবকিট-ট্রান্সফর্ম: ট্রান্সলেটজেড (0); একটি কবজ মত কাজ। এটি ইতিমধ্যে মোবাইল ব্রাউজারটি নয় ক্রোম এবং সাফারিতে কাজ করছিল। এছাড়াও আরও একটি সমস্যা হ'ল র‌্যাপ্পার ডিআইভিগুলি কিছু ক্ষেত্রে সম্পন্ন হয় না। ভাসমান ডিআইভিগুলির ক্ষেত্রে আমরা পরিষ্কার ক্লাস প্রয়োগ করি।

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Answer 8

সম্ভবত ক্রোমের বাগের কারণে আমি সাফারি বা ফায়ারফক্সে প্রতিলিপি করতে পারি না, তবে এটি ক্রোমে 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css, আউটপুটটিতে কাজ করে

এটি একটি খুব নির্দিষ্ট কাঠামো তাই এটি কোনওভাবেই সর্বজনীনভাবে প্রযোজ্য এক-রেখাযুক্ত সিএসএস ফিক্স নয়, তবে সম্ভবত কেউ সাফারি এবং ফায়ারফক্সে কাজ করার জন্য এটির সাথে ঝাঁকুনি দিতে পারে।

Answer 9

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

আমার জন্য সমাধানটি ছিল স্থির উপাদানের বিপরীত রূপান্তরটি প্রয়োগ করা (এই ক্ষেত্রে translate(100%, 0) যা আমার সমস্যাটিকে স্থির করেছে other আমি নিশ্চিত নই যে এটি অন্যান্য ক্ষেত্রে কার্যকর কিনা তবে আমি ভেবেছিলাম যে আমি যেভাবেই ভাগ করে নেব।

আমি উপরে বর্ণিত কি তা দেখানোর একটি উদাহরণ এখানে দেওয়া হয়েছে:

https://codepen.io/relativemc/pen/VwweEez

Answer 10

যোগ করার পদ্ধতি -webkit-transformসংশোধন করা হয়েছে উপাদানে আমার জন্য ইস্যু সমাধান।

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Comments

এটি আমার পক্ষে কাজ করেনি। আপনি কি এটির কাজ করে একটি ডেমো তৈরি করতে সক্ষম?

— অ্যালেক্স

এটি ক্রোম, এফডাব্লুআইডাব্লুতে আমার জন্য একটি সমস্যা সমাধান করেছে। ধন্যবাদ রন

— ক্রিস

আপনাকে ধন্যবাদ, এটি আমাকে একটি সমস্যা সমাধান করেছে। আমার জীবন সংরক্ষিত!

— 21

@ নীল মনরো, অ্যান্ড্রয়েড ২.৩ একটি সম্পূর্ণ নতুন গল্প। এটি স্থির অবস্থানটি মোটেই সমর্থন করে না :)

— বুদ্ধিমান

এখানে এমন একটি ফিডল রয়েছে যেখানে ব্যবহার করা কাজ করে translateZ(0) না । এটি সত্য যে এটি কখনও কখনও কাজ করে I've তবে আমি এখনও এটি সংকুচিত করতে পারি না।

— জেকিউজ

Answer 11

সমস্ত পরীক্ষিত ব্রাউজার এবং মোবাইল ডিভাইস (ক্রোম, আইই, ফায়ারফক্স, সাফারি, আইপ্যাড, আইফোন 5 এবং 6, অ্যান্ড্রয়েড) এ আমার জন্য কী কাজ করে তা এখানে।

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Comments

ডাউনভোটস কেন? আপনি আমার উত্তরটি কেন ভোট দিয়েছিলেন সে সম্পর্কে একটি মন্তব্য সরবরাহ করলে ভাল লাগবে?

— মার্ফ

Answer 12

আপনি যদি কোনও পূর্বপুরুষের কাছে রূপান্তর প্রয়োগ করেন তবে কোনও উপাদানের স্থির অবস্থানটি নষ্ট হয়ে যায়।

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Answer 13

আপনি যদি জাভাস্ক্রিপ্টটিকে কোনও বিকল্প হিসাবে ব্যবহার করতে পারেন তবে এটি কোনও রূপান্তরকারী উপাদানের অভ্যন্তরে যখন উইন্ডোটির সাথে সম্পর্কিত একটি উপাদান স্থিতিযুক্ত অবস্থানের অবস্থানের জন্য কার্যকর হতে পারে:

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

মঞ্জুর যে আপনাকে আপনার উচ্চতা এবং প্রস্থও সামঞ্জস্য করতে fixedElহবে কারণ এটি তার ধারকটির ভিত্তিতে এটি গণনা করবে। এটি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে তবে এটি কোনও ধারক নির্বিশেষে আপনাকে পূর্বনির্ধারিতভাবে নির্দিষ্ট কিছু অবস্থান নির্ধারণ করতে দেয়।

Answer 14

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

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

তারপর

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

তারপর

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

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

Answer 15

আমার ক্ষেত্রে আমি জানতে পেরেছিলাম যে আমরা ট্রান্সফর্মটি ব্যবহার করতে পারি না: ট্রান্সফর্মের আগে ট্রান্সলেট এক্স (): অনুবাদক () অনুবাদ করুন। আমরা যদি উভয়ই ব্যবহার করতে চাই তবে আমাদের ট্রান্সফর্ম ব্যবহার করা উচিত: অনুবাদ (,)।

Answer 16

দয়া করে ভোট দেবেন না, কারণ এটি সঠিক উত্তর নয়, তবে কাউকে সাহায্য করতে পারে কারণ এটি দ্রুত রূপান্তর বন্ধ করার দ্রুত উপায়। যদি আপনার সত্যিই পিতামাতার উপর রূপান্তর প্রয়োজন না হয় এবং আপনি নিজের স্থির অবস্থানটি আবার কাজ করতে চান:

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

Comments

এটি সত্যিকার অর্থে প্রশ্নের শিরোনামে

— ইউজিন পানকভ

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

— মকাকাসি