বেশ কয়েকটি ব্লগ জিপিইউকে 'ট্রিকিং' করে পারফরম্যান্স লাভটি প্রকাশ করেছে বলে মনে করে যে transform: translateZ(0)অ্যানিমেশন এবং ট্রানজিশনগুলির গতি বাড়িয়ে একটি উপাদান 3 ডি হয় is আমি ভাবছিলাম যে নিম্নলিখিত পদ্ধতিতে এই রূপান্তরটি ব্যবহার করতে কোনও প্রভাব রয়েছে:
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
-o-transform: translateZ(0)কখনও জিনিস ছিল না। caniuse.com/#search=translate3d
উত্তর:
সিএসএস রূপান্তরগুলি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে এবং এতে ব্লক রয়েছে, যেমনটি স্পপে বর্ণিত হয়েছে । সরল ইংরেজিতে, এর অর্থ এই যে পরিবর্তিত স্থির অবস্থান উপাদানগুলি প্রয়োগ করা হলে তারা একেবারে অবস্থানযুক্ত উপাদানগুলির মতো কাজ করবে এবং z-indexমানগুলি সম্ভবত স্ক্রু হয়ে উঠবে ।
আপনি যদি এই ডেমোটি একবার দেখে থাকেন তবে আপনি কী বলতে চাইছেন তা দেখতে পাবেন। দ্বিতীয় ডিভের সাথে এটির জন্য একটি রূপান্তর প্রয়োগ করা হয়েছে যার অর্থ এটি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে এবং সিউডো উপাদানগুলি নীচের পরিবর্তে শীর্ষে সজ্জিত।
সুতরাং মূলত, এটি করবেন না। আপনার অপ্টিমাইজেশনের প্রয়োজন হলেই একটি 3D রূপান্তর প্রয়োগ করুন। -webkit-font-smoothing: antialiased;এই সমস্যাগুলি তৈরি না করে 3D ত্বরণে ট্যাপ করার আরেকটি উপায়, তবে এটি কেবল সাফারিতেই কাজ করে।
আপনি যদি বোঝাতে চান তবে কিছু পরিস্থিতিতে হার্ডওয়্যার ত্বরণ সক্ষম করার সাথে গুগল ক্রোমের কার্যকারিতা ভয়াবহ । অদ্ভুতভাবে যথেষ্ট, "কৌশল" পরিবর্তন করে -webkit-transform: rotateZ(360deg);ঠিক কাজ করে।
আমি বিশ্বাস করি না যে আমরা কখনই তা বুঝতে পেরেছি।
এটি ব্রাউজারটিকে ডিভাইসের গ্রাফিকাল প্রসেসিং ইউনিট (জিপিইউ) পিক্সেলগুলিতে উড়ে যাওয়ার জন্য হার্ডওয়্যার ত্বরণ ব্যবহার করতে বাধ্য করে। অন্যদিকে, ওয়েব অ্যাপ্লিকেশনগুলি, ব্রাউজারের প্রসঙ্গে চালিত হয়, যা সফ্টওয়্যারটি রেন্ডারিংয়ের সর্বাধিক (সমস্ত না থাকলে) করতে দেয়, ফলে রূপান্তরের জন্য কম অশ্বশক্তি হয়। তবে ওয়েবটি ধরা পড়েছে, এবং বেশিরভাগ ব্রাউজার বিক্রেতারা এখন নির্দিষ্ট সিএসএস বিধি দ্বারা গ্রাফিকাল হার্ডওয়্যার ত্বরণ সরবরাহ করে।
ব্যবহারের -webkit-transform: translate3d(0,0,0);ফলে জিপিইউকে সিএসএস রূপান্তরগুলির জন্য কার্যকর করা হবে, এগুলি মসৃণ করা হবে (উচ্চতর এফপিএস)।
দ্রষ্টব্য: আপনি যা translate3d(0,0,0) দেখেন সে অনুসারে কিছুই করে না। এটি x, y এবং z অক্ষে 0px দ্বারা অবজেক্টটিকে সরিয়ে দেয়। এটি কেবল একটি হার্ডওয়্যার ত্বরণকে বাধ্য করার কৌশল।
এখানে ভাল পড়ুন: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
আমি এই সত্যের সাথে প্রমাণ করতে পারি যে -webkit-transform: translate3d(0, 0, 0);নতুন position: -webkit-sticky;সম্পত্তি নিয়ে গণ্ডগোল হবে । আমি যে বাম ড্রয়ার নেভিগেশন প্যাটার্নটিতে কাজ করছিলাম তার সাথে, ট্রান্সফর্ম সম্পত্তি সহ আমি যে হার্ডওয়্যার ত্বরণটি চেয়েছিলাম তা আমার শীর্ষ ন্যাভ বারের স্থির অবস্থানের সাথে গোলমাল করছে। আমি রূপান্তরটি বন্ধ করে দিয়েছি এবং অবস্থান ঠিকঠাক কাজ করেছে।
ভাগ্যক্রমে, আমার মনে হচ্ছে ইতিমধ্যে হার্ডওয়্যার ত্বরণ ছিল, কারণ আমার -webkit-font-smoothing: antialiasedএইচটিএমএল উপাদান ছিল। আমি iOS7 এবং অ্যান্ড্রয়েডে এই আচরণটি পরীক্ষা করছিলাম।
মোবাইল ডিভাইসে জিপিইউতে সবকিছু প্রেরণ করা মেমরির ওভারলোডের কারণ এবং অ্যাপ্লিকেশনটি ক্র্যাশ করে। কর্ডোভাতে একটি আইপ্যাড অ্যাপে আমি এর মুখোমুখি হয়েছি। কেবলমাত্র জিপিইউতে প্রয়োজনীয় আইটেমগুলি প্রেরণ করা সর্বোত্তম, যে ডিভগুলি আপনি নির্দিষ্টভাবে ঘুরছেন।
আরও ভাল, 3 ডি স্থানান্তর রূপান্তরগুলি বামের বিপরীতে ট্রান্সলেটএক্স (50px) এর মতো অ্যানিমেশনগুলি করতে ব্যবহার করুন : 50px;