সিএসএস রূপান্তর প্রভাব ক্রোমে চিত্রকে অস্পষ্ট করে / চিত্র 1px করে?

Question

আমার কিছু সিএসএস রয়েছে যেগুলি হোভারের উপর, সিএসএস রূপান্তর প্রভাবটি একটি ডিভ স্থানান্তরিত করে।

সমস্যাটি যেমন আপনি উদাহরণটিতে দেখতে পাচ্ছেন তা হ'ল translateস্থানান্তরের চিত্রটি 1 ডিপি / নিচে / ডান দ্বারা ডিভ মুভটিতে চিত্র তৈরি করার ভয়াবহ পার্শ্ব প্রতিক্রিয়া রয়েছে (এবং সম্ভবত এতটা সামান্য আকার পরিবর্তন করতে পারে?) যাতে এটি স্থানের বাইরে উপস্থিত হয় এবং সীমার বাহিরে...

হোচ প্রভাবটি প্রয়োগ হওয়ার পুরো সময়টি প্রয়োগ হয় বলে মনে হয়, এবং ট্রায়াল এবং ত্রুটির প্রক্রিয়া থেকে আমি নিরাপদে বলতে পারি কেবল তখনই ঘটতে পারে যখন অনুবাদ স্থানান্তরটি ডিভকে সরায় (বাক্সের ছায়া এবং অস্বচ্ছতাও প্রয়োগ করা হয় তবে এতে কোনও পার্থক্য নেই) মুছে ফেলা হলে ত্রুটি)।

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

Comments

আমি ওএসএক্স-এ ক্রোম ২ 27 এ আছি এবং ঠিক আছে। আমি বিশ্বাস করি যে বিষয়বস্তুটি যখন কোনও স্তরতে পরিণত হয় তখন এনিমেশন চলাকালীন এটি বিটম্যাপে পরিণত হয় এবং পুরানো সংস্করণ / পুরানো গ্রাফিক্স কার্ডগুলিতে এটি দুর্দান্ত দেখায় না। আরও নতুন সংস্করণ চেষ্টা করে দেখুন এটি ঠিক আছে কিনা।

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

Chrome 25 OS X. বিটিডাব্লুতে সমস্ত কিছু সূক্ষ্ম: আমি 300KB চিত্রের চেয়ে ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট টেক্সচারের জন্য আলাদা পদ্ধতির পরামর্শ দেব!

— পাওলো

এবং ধন্যবাদ @ পাওলো - পটভূমি চিত্রটি কেবলমাত্র বিক্ষোভের জন্য ছিল, এটি প্রকৃত সাইটে ব্যবহার করা চিত্র নয়!

— লুইস

সমস্যাটি দেখা দেয় যখন অ্যানিমেশনটি জিপিইউ দ্বারা পরিচালিত হয়, মনে হয় বিটম্যাপ রাউন্ডিংগুলি কিছুটা বন্ধ off ক্যানারিতে পুনরুত্পাদন করা হয়, তবে আপনি জিপিইউ ত্বরণ বন্ধ রাখলে এটি ঠিক কাজ করে

— ভ্যালস

আপনি এই সমাধানটি প্রতিটি ফ্রেম ব্যবহার

— মিগুয়েল

Answer 1

2020 আপডেট

• অস্পষ্ট চিত্রগুলির সাথে আপনার যদি সমস্যা থাকে তবে নীচের থেকে উত্তরগুলিও বিশেষত image-renderingসিএসএসের সম্পত্তি থেকে যাচাই করতে ভুলবেন না ।
• সেরা অনুশীলন অ্যাক্সেসযোগ্যতা এবং এসইও ওয়াইসের জন্য আপনি পটভূমির চিত্রটি <img>ট্যাগ দিয়ে অবজেক্ট-ফিট সিএসএস সম্পত্তি ব্যবহার করে প্রতিস্থাপন করতে পারেন ।

---

আসল উত্তর

আপনার সিএসএস এ চেষ্টা করুন :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

এটি যা করে তা বিভাগকে "আরও 2 ডি" আচরণ করে।

• ঘোরানো এবং এ জাতীয় জিনিসগুলিকে উল্টাতে অনুমতি দিতে ব্যাকফেসটি ডিফল্ট হিসাবে আঁকা। যদি আপনি কেবল বাম, ডান, উপরে, নীচে, স্কেল বা ঘড়ির কাঁটার বিপরীতে ঘুরান তবে এর কোনও দরকার নেই।
• সর্বদা শূন্য মানের জন্য জেড-অক্ষটি অনুবাদ করুন।
• Chrome বর্তমানে হ্যান্ডলগুলি backface-visibilityএবং transformছাড়া -webkit-উপসর্গ। আমি বর্তমানে জানি না এটি কীভাবে অন্যান্য ব্রাউজারগুলির রেন্ডারিংকে (এফএফ, আইই) প্রভাবিত করে, তাই সাবধানতার সাথে অ-প্রিফিক্সড সংস্করণগুলি ব্যবহার করুন।

Comments

কিছু ব্যাখ্যা নাও করতে পারে তবে এটি আমার জন্য এই সমস্যার সমাধানের জন্য যথেষ্ট ব্যাখ্যা করেছে।

— ম্যাকনাব

@ ক্লাস স্ট্যাকার - কী ব্যাখ্যা করবেন? আপনি কোডটি কেবল আপনার সমস্যাযুক্ত উপাদানটিতে আটকান। বিটিডব্লিউ এটি খুব সুন্দর কাজ করে!

— ইজিউই

আমি এই সমাধানটি স্ট্যাকওভারফ্লো.com/a/42256897/1834212 অনুলিপি এড়ানোর জন্য লিঙ্কটি পোস্ট করার পরামর্শ দিচ্ছি

— মিগুয়েল

কেউ যদি এটি এখনও কাজ করে তা নিশ্চিত করতে পারে, কারণ যখনই আমি we-ওয়েবেকিট-ব্যাকফেস-ভিজিবিলিটি যুক্ত করি এবং -webkit-transformআমি সত্যিই পরিবর্তন দেখতে পাই না এবং যখন আমি ক্রোমস বিকাশকারী কনসোল খুলি। আমি দেখতে পাচ্ছি যে 2 সিএসএসের বৈশিষ্ট্যগুলি স্ট্রোক করা হয়েছে, যেন সেগুলি ওভাররাইট করা হয় তবে সেগুলি (খালি সিএসএস এবং এইচটিএমএল) নয়। এটি যেন ক্রোম তাদের আর গ্রহণ করে না।

— কেভিন এম

@ কেভিনিএম -উবকিট-উপসর্গগুলি ছাড়া চেষ্টা করুন, এগুলি এখন স্ট্যান্ডার্ড সিএসএস।

— সাম্পোহ

Answer 2

আপনাকে উপাদানটিতে 3 ডি রূপান্তর প্রয়োগ করতে হবে, সুতরাং এটি নিজস্ব সংমিশ্রণ স্তরটি পাবে। এই ক্ষেত্রে:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

অথবা

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

স্তর তৈরি করার মানদণ্ড সম্পর্কে আরও আপনি এখানে পড়তে পারেন: ক্রোমে এক্সিলারেটেড রেন্ডারিং

---

একটি ব্যাখ্যা:

উদাহরণ (হোভার গ্রিন বক্স):

• সমস্যা: সংক্রমণের ফলে ভাইবোনের উপাদানগুলিতে ঝলকানো প্রভাব পড়তে পারে (ওএসএক্স সিংহ, ক্রোম 30)
• সমাধান: নিজস্ব যৌগিক স্তরের একটি উপাদান

আপনি যখন আপনার উপাদানটিতে কোনও রূপান্তর ব্যবহার করেন এটি ব্রাউজারকে শৈলীর পুনরায় গণনার জন্য সৃষ্টি করে, তারপরে রূপান্তর সম্পত্তি ভিজ্যুয়াল (আমার উদাহরণগুলিতে এটি একটি অস্বচ্ছতা) এবং চূড়ান্ত রঙে কোনও উপাদান রঙ করলেও আপনার সামগ্রীটিকে পুনরায় বিন্যাস করুন:

এখানে সমস্যাটি হ'ল সামগ্রীটির পুনঃ বিন্যাস যা ট্রানজিশন হওয়ার সাথে সাথে পৃষ্ঠায় "নাচ" বা "জ্বলজ্বলে" উপাদানগুলির প্রভাব ফেলতে পারে। আপনি যদি সেটিংসে যান, "যৌগিক স্তরগুলি দেখান" চেকবক্সটি পরীক্ষা করুন এবং তারপরে কোনও উপাদানে 3 ডি রূপান্তর প্রযোজ্য, আপনি দেখতে পাবেন এটি কমলা সীমান্তের সাথে বর্ণিত এটির নিজস্ব স্তর রয়েছে।

উপাদানটির নিজস্ব স্তরটি পাওয়ার পরে, ব্রাউজারটিকে কেবল পুনঃ-বিন্যাস বা রঙিন ক্রিয়াকলাপ ছাড়াই সংক্রমণের সময় সংমিশ্রিত স্তরগুলির দরকার হয় যাতে সমস্যার সমাধান হতে হয়:

Comments

দারুণ জিনিস! আপনার উত্তরটি কতটা বিশদ ছিল তার একটি বিন্দু কারণ পেল! স্ক্রিন ক্যাপচারিং / অ্যারিংয়ের জন্য আপনি কোন সফ্টওয়্যার ব্যবহার করছেন?

— kroe

সাথীর দাগ !! আমাকে সেখানে অনেক ঝামেলা বাঁচিয়েছে।

এটি আমার জন্য কৌশলটি করেছে। প্রথমে আমি পিতামাতার উপর অনুবাদ জেড ব্যবহার করছিলাম যে আমি অ্যানিমেট করছি, তবে এর মধ্যে পটভূমি-চিত্রের স্প্রিটগুলি এখনও ঝাপসা। আমি এর মধ্যে আরও একটি ধারক স্কেল করতে Velocity.js ব্যবহার করছি এবং এর মতো কিছু প্রয়োগ করেছি translateZ: 0.000001(কিছু অসীম #) এবং ভয়েলা! আবারও তীব্র ব্যাকগ্রাউন্ড-চিত্র!

— notacouch

ধন্যবাদ বন্ধু. এটি আমার সমস্যা নিয়ে কাজ করেছে। যাইহোক, আমার সমস্যাটি হ'ল আমার কাছে এমন একটি উপাদান রয়েছে যা 90 ডিগ্রি ঘোরানো হয় এবং অস্বচ্ছতা ব্যবহার করে ম্লান-ইন ট্রানজিশন থাকে। ট্রানজিশনটি ট্রিগার করার সময় উপাদানটির সামগ্রীটি 1px বাম থেকে সরানো হয়।

— লয়েড আরন

Answer 3

এম্বেড করা ইউটিউব ইফ্রেমে একই সমস্যা ছিল (অনুবাদগুলি iframe উপাদানকে কেন্দ্র করে রাখার জন্য ব্যবহৃত হত)। CSS ফিল্টারগুলি পুনরায় সেট করার চেষ্টা করা পর্যন্ত উপরের সমাধানগুলির কোনওটিই কাজ করে না এবং যাদু নি।

গঠন:

<div class="translate">
     <iframe/>
</div>

স্টাইল [আগে]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

স্টাইল [পরে]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Comments

filter: blur(0)এটা আমার জন্য!

— নিক

অস্পষ্টতার সাথে অবিশ্বাস্য ও_ও ডাব্লুটিএফ? কেন এটি ডিফল্টরূপে?

— ইউরি পোলেজায়েভ

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

— এডওয়ার্ড কোয়েল জুনিয়র

-webkit-উপসর্গটি আগে আসা উচিত নয় ? আরও তথ্য

— ট্রেভর নেস্টম্যান

Answer 4

আমি সর্বশেষ ব্রাউজারে পরীক্ষিত একটি নতুন নতুন বৈশিষ্ট্য সিএসএসের সুপারিশ করেছি এবং এটি ভাল:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

এটির সাহায্যে ব্রাউজারটি রেন্ডারিংয়ের জন্য অ্যালগরিদম জানবে

Comments

এটি আমার অস্পষ্ট ঘোরানো চিত্রগুলি স্থির করে যখন ব্যাকফেস-দৃশ্যমানতা, অস্পষ্টতা (0), অনুবাদ জেড আমার পক্ষে কাজ করে না। ধন্যবাদ.

— লুই আমেরাইলাইন

কিছু ব্যবহারের ক্ষেত্রে স্থির চিত্রগুলি এটি অন্য কারও কাছে মারাত্মকভাবে খারাপ করে তোলে :-) যে কোনও ক্ষেত্রেই আকর্ষণীয়!

— সাইমন স্টেইনবার্গার

আরও গভীরে খনন করা হয়েছে: image-rendering: -webkit-optimize-contrast;এটি ক্রোমে সমস্যা সমাধান করে। তবে অন্যান্য ব্রাউজারগুলিতে চিত্রগুলি, যেমন ফায়ারফক্স, রেন্ডারিং বিকল্প সেট সহ আরও অনেক বেশি রেন্ডার হয়ে যায়। অতএব, আমি কেবল ওয়েবকিট নির্দেশিকা ব্যবহার করি, এটি ব্লিঙ্ক ইঞ্জিনেও কাজ করে। ধন্যবাদ!

— সাইমন স্টেইনবার্গার

কিছু ক্ষেত্রে এটি চিত্রগুলি লক্ষণীয়ভাবে জাগ্রত করে তোলে।

— অস্পষ্ট

Answer 5

রূপান্তরিত হওয়ার সময় কোনও উপাদান ঝাপসা হয়ে যাওয়ার আরও একটি কারণ সবেমাত্র খুঁজে পেয়েছি। আমি transform: translate3d(-5.5px, -18px, 0);একবারে কোনও উপাদান লোড হয়ে যাওয়ার পরে এটি পুনরায় অবস্থানের জন্য ব্যবহার করছি, তবে সেই উপাদানটি ঝাপসা হয়ে যায়।

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

অর্থাত্ 5.5pxসবচেয়ে 5.1pxকম পরিমাণে উপাদানটিকে ঝাপসা করে ।

কেবল ভেবেছিল যে কারও সাহায্য করার ক্ষেত্রে আমি এটিকে এখানে রেখে দেব।

Comments

ধন্যবাদ, এটি আমার ক্ষেত্রে সমস্যা ছিল - আমি অনুবাদ ওয়াই (-50%) ব্যবহার করছিলাম যা অবশ্যই এক দশমিক পিক্সেলের মানকে মূল্যায়ন করছিল।

— বি

Answer 6

আমি ধাপে ধাপে संक्रमणটি ব্যবহার করে প্রতারণা করেছি, সহজেই নয়

transition-timing-function: steps(10, end);

এটি কোনও সমাধান নয়, এটি একটি প্রতারণা এবং সর্বত্র প্রয়োগ করা যায় না।

আমি এটি ব্যাখ্যা করতে পারি না, তবে এটি আমার পক্ষে কার্যকর। অন্য কোনও উত্তরই আমাকে সহায়তা করে না (ওএসএক্স, ক্রোম 63৩, রেটিনা প্রদর্শন)

https://jsfiddle.net/tuzae6a9/6/

Comments

আপনার মজার ভাবটি পার্কিনসনের মতো কাঁপছে, তবে আমার ক্ষেত্রে কাজ হয়েছে।

— টারসিও জেমেল

Answer 7

স্কেলিং দ্বিগুণ এবং zoomআমার জন্য কাজ করে অর্ধেকে নামিয়ে আনা ।

transform: scale(2);
zoom: 0.5;

Comments

এটি চিত্রগুলির জন্য ক্রোমে কাজ করে বলে মনে হচ্ছে। দুর্ভাগ্যক্রমে এটি যে কোনও এইচটিএমএলকেও প্রায় কাছাকাছি রেখেছিল তা পরিবর্তন করে।

— জ্যাক ডেভিডসন

Answer 8

আমি প্রায় 10 টি সমাধান সমাধানের চেষ্টা করেছি। তাদের মিশ্রিত করে এবং তারা এখনও সঠিকভাবে কাজ করে না। সর্বদা সর্বদা 1px শেক ছিল।

আমি ফিল্টারে স্থানান্তরের সময় হ্রাস করে সমাধান খুঁজে পাই।

এটি কার্যকর হয়নি:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

সমাধান:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

এটিকে চেষ্টা করুন:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

আমি আশা করি এটা কারো সাহায্যে লাগবে.

Answer 9

চেষ্টা filter: blur(0);

এটা আমার জন্য কাজ করেছে

Comments

আমার জন্যও খুব বেশি

— পরিশ্রম

Answer 10

আমার জন্য এখন ২০১ 2018 সালে my transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

Comments

হ্যাঁ! 'ব্লার (0)' এটি ক্রোমে আমার জন্য ঠিক করে। আকারটিকে চিত্রটি খুব সামান্য ঝাপসা করে তোলে তবে তা লাফ / পুনরায় আকারের চেয়ে কম লক্ষণীয়

— 00-বিবিবি

Answer 11

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

রূপান্তরের সময়কালের .3sসমান ট্রানজিশনের সময় নির্ধারণের মান নির্ধারণ করে আমাকে সহায়তা করা হয়েছিল.3s

Answer 12

ঠিক একই সমস্যা পেয়েছি। অবস্থান নির্ধারণের চেষ্টা করুন: পিতামাতার সাথে সম্পর্কিত, যা আমার পক্ষে কাজ করেছে।

Comments

আপনার কি এই কাজের একটি ডেমো আছে? এটি কীভাবে সাহায্য করবে সে সম্পর্কে আমার কোনও ধারণা নেই

— Zach Sauceer

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

— লেয়া কোহেন