আইফোন ওয়েবকিট সিএসএস অ্যানিমেশনগুলির কারণে ঝাঁকুনির সৃষ্টি হয়

Question

এটি আইফোন সাইট: http://www.thevisionairegroup.com/projects/accessorizer/site/

"এখন খেলুন" ক্লিক করার পরে আপনি একটি গেমটি পেয়ে যাবেন। বন্দুকগুলি ভিতরে স্ক্রোল করবে You আপনি পার্স এবং আনুষাঙ্গিকগুলি উপরে এবং নীচে স্ক্রোল করতে পারেন। আপনি দেখতে পাবেন যে তারা এগুলিতে স্ন্যাপ দেয়। যেহেতু স্ন্যাপটি ঘটেছিল ঠিক তেমনই একটি ঝাঁকুনির ঘটনা ঘটে। কেবলমাত্র ওয়েবকিট অ্যানিমেশনগুলি আমি ব্যবহার করছি:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

আমি এটি সঞ্চারিত করতে চাই বা না তার উপর ভিত্তি করে আমি প্রথম বা দ্বিতীয় স্থানান্তরকেই বেছে নিই এবং ট্রান্সফর্মটি কেবলমাত্র জিনিসগুলিকে ঘুরিয়ে নিয়ে যায়।

যদিও সবচেয়ে বড় সমস্যাটি আপনি যখন "ম্যাচ আইটেমগুলি" ক্লিক করেন, তারপরে "আবার খেলুন" ক্লিক করুন। বন্দুকগুলি অ্যানিমেট করার সময় আপনি দেখতে পাবেন, আনুষাঙ্গিকগুলি / পার্সের পুরো পটভূমি সাদা হয়ে যায়। কেউ দয়া করে কিছু অন্তর্দৃষ্টি দিয়ে আমাকে বিকিরণ করতে পারেন কেন এমন হচ্ছে ??

Answer 1

আমি যোগ করেছি -webkit-backface-visiblityএবং এটি বেশিরভাগ ক্ষেত্রে সহায়তা করেছিল তবে পৃষ্ঠাটি পুনরায় লোড করার পরেও আমার একটি প্রাথমিক ঝাঁকুনি ছিল। আমি যুক্ত করার সময় -webkit-perspective: 1000, কোনও ঝাঁকুনি ছিল না।

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Comments

1000 এর পিছনে যাদু কি? অন্য কোনও মান (> 0) কি কাজ করতে পারে?

— cirus

দ্রষ্টব্য: এটি উইন্ডো ক্রোম ভি 19 তে অ্যানিমেশনটিকে মাউস ইভেন্টগুলিতে প্রতিক্রিয়াহীন করে তোলে:

— বাস্তবে

দ্রষ্টব্য: ব্যাকফেস-দৃশ্যমানতা যুক্ত করা আপনার রঙগুলি উপস্থাপনে পরিবর্তন আনবে। : এখানে এবং বন্ধ backface দৃশ্যমানতা সঙ্গে একটি উদাহরণ bit.ly/13ldbvY

— Tamik Soziev

লিঙ্ক উপাদানগুলিকে রূপান্তর করার চেষ্টা করার সময় আমার কাছে টেক্সট ফ্লিকারিংয়ের সাথে এই সমস্যা ছিল। ব্যাকফেস-দৃশ্যমানতা পরিবর্তন অ্যান্টি-এলিয়াসিংকে পরিবর্তিত করে ফন্টটিকে সত্যই সরু করে তুলেছে। -ওয়েবকিট-ফন্ট-স্মুথিং ব্যবহার করে স্থির করা: সাবপিক্সেল-অ্যান্টিঅ্যালিয়াসেড;

— ড্যান

@ ক্রিস আমি অনুমান করি আমরা কখনই জানতে পারব না

— ডেনি

Answer 2

এটি চেষ্টা করুন, এবং আশা করি এটি সহায়তা করবে:

#game {
  -webkit-backface-visibility: hidden;
}

Comments

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

— সিউরাস

Answer 3

body {-webkit-transform:translate3d(0,0,0);}

Comments

এটি আমার জন্য এটি করেছে .. তবে #wrapperশরীরে প্রয়োগ করা লেআউটটিকে স্ক্রু দেবে বলে আমাকে এটি একটি উপাদানটিতে প্রয়োগ করতে হয়েছিল।

— অ্যাডামজেলিভ

যদি কেউ ব্যাকফেসটি দেখতে চান "-উইবকিট-ব্যাকফেস-দৃশ্যমানতা: লুকানো; কাজ করে না, তবে এটি একদম নিখুঁত। ধন্যবাদ!

— নচটগোল্ড

নিখুঁত। -webkit-backface-visibility: hidden;যে কোনও স্কেলের রূপান্তরকে ঝাপসা করে। body {-webkit-transform:translate3d(0,0,0);}একটি ট্রিট কাজ।

— লিয়াম

আমি চেষ্টা করছি কিন্তু এটি আমার পক্ষে কাজ করছে না। এখানে একটি কোড স্নিপেট: codeply.com/go/g7Zp98paz5

— Fran_gg7

এটি আমার পক্ষে কাজ করেছে। আমার ক্ষেত্রে, scale(1)ঝাঁকুনির কারণ। অনেক ধন্যবাদ

— জানসুন

Answer 4

আমার মামলার আসল উত্তর এখানে। কারও সাথে ঘনিষ্ঠ ছিল:-ওয়েবেকিট-ব্যাকফেস-দৃশ্যমানতা: লুকানো; তবে আসল উত্তরটি হ'ল ওয়েবেকিট-ব্যাকফেস-দৃশ্যমানতা: লুকানো; চাহিদা যুক্ত করার জন্য পিতা বা মাতা DIV আছে।

Comments

আমার আসলে -webkit-backface-visibility: hidden;পিতামাত্ত্বিক ডিভ, অ্যানিমেটেড ডিভিও এবং অ্যানিমেটেড ডিভির বাচ্চাদের যুক্ত করা দরকার। একবার আমি এটি করেছি, এটি নির্বিঘ্নে কাজ করে।

— mattstuehler

আমি মনে করি এটি আমার ঝাঁকুনিটিকে পিতামাতার সাথে যুক্ত করে স্থির করেছে। এটা আসলে কী কাজ করে?

— chovy

এটিকে পিতামাতার সাথে যুক্ত করা শিশু উপাদানগুলির "স্থির" অবস্থানটিকে পূর্বাবস্থায় ফিরিয়ে দেয় :(

— জেমস

Answer 5

আমারও "ঝাঁকুনি" সিএসএস ট্রানজিশনে সমস্যা ছিল। প্রশ্নে থাকা অ্যানিমেশনটি একটি মেনু ছিল অফ স্ক্রিন থেকে স্লাইডিংয়ে, এবং অ্যানিমেশনটি শেষ হওয়ার সাথে সাথে পুরো মেনু ফ্ল্যাশড / ফ্লিক হয়ে গেছে।

দেখা গেল, এটি একটি সত্যিকারের আইওএস বৈশিষ্ট্য দ্বারা তৈরি হয়েছিল, "ট্যাপ হাইলাইট" , যা কোনও কারণে সিএসএস অ্যানিমেশন শেষ হওয়ার পরে লাথি মেরেছিল (যেমন আসল ট্যাপের পরে), এবং কেবলমাত্র উপাদানটির পরিবর্তে পুরো মেনু হাইলাইট করেছে যে টেপ ছিল। আমি এখানে বর্ণিত হিসাবে সম্পূর্ণভাবে ট্যাপ-হাইলাইট অক্ষম করে বিষয়টি "স্থির" করেছি :

-webkit-tap-highlight-color: rgba(0,0,0,0);

Answer 6

মাইকের উত্তর কার্যকর হয়েছিল -webkit-backface-visibility: hidden; যখন আমরা এই সমস্যায় পড়ি। কোনও আইওএস ৩.১.৩ এবং এর আগে বাউন্ডারি বাগটি রোধ করার জন্য translateZ(0px)আমাদের <body>ট্যাগটিতে ছিল IFRAMEএবং এটি এনিমগুলিকে ঝাঁকুনিতে ফেলেছিল। যোগ করার পদ্ধতি -webkit-backface-visibility: hidden;প্রতিটি উপাদানে আমরা দপদপ করে ওঠার সংশোধন অ্যানিমেটেড! জীবন রক্ষাকারী

Answer 7

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

আমি লক্ষ্য করেছি যে যখন আমার একটি ডিভিতে হোভারের অবস্থা থাকবে তখন পৃষ্ঠাটি ঝাঁকুনি হয়ে উঠবে, যদিও আমার কোনও সিএসএস বা জেএস এটির সাথে সংযুক্ত না থাকলেও। সম্ভবত এটি অন্য কাউকে সাহায্য করে।

Comments

আমার জন্য যে কৌশলটি করেছে। অন্যগুলি কেবল তখনই প্রাসঙ্গিক ছিল যখন স্থানান্তরের স্থান ছিল।

— নাদভ

Answer 8

যদি কেউ দেখতে পান যে ব্যাকফেস-দৃশ্যমানতা কাজ করছে না, আপনি ইতিমধ্যে আপনার অ্যানিমেটেড উপাদানটিতে থাকা বৈশিষ্ট্যগুলি দেখে নিতে পারেন। আমাদের জন্য, আমরা এটি overflow-y: scrollএকটি absoluteবা পাওয়া গেছেfixed অবস্থানগত উপাদানটি আইওএস-এ বড় ধরনের ঝাঁকুনির কারণ হয়ে দাঁড়িয়েছে।

কেবল অপসারণ overflow-y: scrollএটি স্থির।

Comments

অপসারণ overflow-y: scrollআমার ক্ষেত্রে সহায়তা করেছে। তোমাকে অনেক ধন্যবাদ!

— ইয়ামসালাত

এটা সম্ভবত আমার ক্ষেত্রেও। তবে আমি এই উপাদানটির জন্য ওভারফ্লো-ওয়াই নরমের পরম পজিটোনটি সরাতে পারি না। কোন ধারণা?

— কোবি কোহেন

Answer 9

যদিও আমার ছিল -webkit-transform-style: preserve-3d;এবং-webkit-backface-visibility: hidden ফ্লিকারটি এখনও ঘটছিল।

আমার ক্ষেত্রে কারণ ছিল z-index। সক্রিয় উপাদানগুলিতে এটি বাড়ানো সাহায্য করেছিল।

Answer 10

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

এটি ঝাঁকুনির কারণ:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

পরিবর্তে করুন:

$('#banner').attr('class', '.slide-1');

ক্লাস সংজ্ঞায়িত সহ:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

Answer 11

এই সমাধান চেষ্টা করুন । এটি ফোনগ্যাপ + জিকিউএম 1.4.0 এ আমার জন্য কাজ করে :

এই পরিবর্তন <meta name="viewport" content="width=device-width, initial-scale=1">

পরিবর্তে এটি:

<meta name="viewport" content="width=device-width, user-scalable=no" />

এখানে আরও পড়ুন: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 12

এম্বার অ্যানিমেটেড আউটলেটস, ফোনগ্যাপ এবং আইওএস সেটআপের জন্য আমি এই সমস্যাটি বের করার চেষ্টা করে অনেক সময় ব্যয় করেছি ।

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

আমার সেটআপটি প্রতিটি টেম্পলেটটির জন্য ছিল এবং তিনটি উপাদানই তাদের একটি পটভূমি রঙ বরাদ্দ করেছে:

<header></header> <body class="content"></body> <footer></footer>

Answer 13

"সমস্ত" এ রূপান্তরটি প্রয়োগ করার পরিবর্তে কেবল আপনার সত্যিকারের প্রয়োজনটিকে নির্দিষ্ট করুন। এটি আমার মামলার ঝাঁকুনি সরিয়ে দিয়েছে।

Answer 14

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

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Answer 15

আমার জন্য, সাফারি সম্পর্কিত ঝাঁকুনির বিষয়টি মুছে ফেলার মাধ্যমে সমাধান করা হয়েছে will-change: transform; অ্যানিমেটেড উপাদান থেকে ।

এছাড়াও আমি এই সমস্যাটি overflow: hidden;পিতামাতার সাথে যুক্ত করে সমাধান করতে পারি , তবে এটির সাথে সমস্ত উপাদান transform: translateZ()অকার্যকর হয়ে পড়ে

Answer 16

আমাকে একটি আসল মান ব্যবহার করতে হয়েছিল (0 এর চেয়ে বেশি):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

উদাহরণ:

<div class="foo no-flick"></div>

আমি যা পড়েছি তা থেকে , ফ্লিকারটি ব্রাউজারটি হার্ডওয়্যার এবং সফ্টওয়্যার রেন্ডারিংয়ের মধ্যে স্যুইচ করার কারণে ঘটে। এবং আমি মনে করি যে ব্রাউজার নির্মাতারা হার্ডওয়্যার রেন্ডারিংকে বাধ্য করার জন্য হ্যাঁ প্রাচীন "" অনুবাদ 3d (0,0,0) "সম্পর্কে সচেতন - তাই তারা এখন এই নকল মানগুলিকে উপেক্ষা করতে পারে।

=> একটি আসল মান ব্যবহারের ফলে জিনিসগুলিকে "স্টিক" থাকতে পারে।

যাইহোক, আমার জন্য কাজ।

Answer 17

আমি কোনও ডিফল্ট অ্যান্ড্রয়েড ওয়েব ব্রাউজার ব্যবহার করার সময় স্লাইড ট্রানজিশন সম্পাদনের সময় ঝাঁকুনির অভিজ্ঞতা পেয়েছি।

আমি নিম্নলিখিত রূপান্তর সিএসএস ব্যবহার করেছি:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

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

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

Answer 18

আমার জন্য এটি কী স্থির করেছিল তা হ'ল রূপান্তর-অনুবাদ সিএসএস নিয়মের কার্যভারতিকে বিলম্ব করা। এটার মতো কিছু:

এইচটিএমএল:

<div class="animate-this loading"></div>

সিএসএস:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

জাভাস্ক্রিপ্ট (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

---

… কারণ আমার জন্য কিছুই-webkit-backface-visibility: hidden; করেনি ।

Answer 19

সুতরাং আমি এই সমস্যার জন্য একটি স্থিতি খুঁজে পেয়েছি যেখানে অন্য কেউ সঠিকভাবে কাজ করেন নি।

সিএসএস:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

এইচটিএমএল:

<div class="ios-animation-fixer"></div>

তারপরে z-indexআপনার অ্যানিমেটেড উপাদানটি>> এর জন্য সেট করুন This এটি কোনওভাবে আইওএস ডিভাইসগুলিকে অ্যানিমেশনটিকে অন্যরকমভাবে উপস্থাপনে চালিত করে এবং আমার দৃশ্যে ফ্লিকারটিকে এড়িয়ে চলে। এই সমাধানটি গেটের বাইরে চলে না গেলে জেড-ইনডেক্স মানগুলি সমন্বয় করা সহায়ক হতে পারে।

Answer 20

2019 আপডেট করুন

আপনি পরিবর্তিত ব্যবহৃত উপাদানটিতে এই নিয়মগুলি কেবল যুক্ত করে ঝলকানো চালু করতে পারেন।

-webkit-transform: translate3d(0, 0, 0);

সাফরাইয়ে আমার জন্য কাজ করেছেন