সিএসএস ট্রান্সফর্ম ব্যবহারের পরে অস্পষ্ট পাঠ্য: স্কেল (); ক্রোমে

126

দেখে মনে হচ্ছে গুগল ক্রোমে সাম্প্রতিক আপডেট হয়েছে যা একটি করার পরে অস্পষ্ট পাঠ্যর কারণ হয় transform: scale()। বিশেষত আমি এটি করছি:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

আপনি যদি ক্রোমে http://rourkery.com দেখতে যান তবে আপনার মূল পাঠ্য ক্ষেত্রে সমস্যাটি দেখা উচিত। এটি এটি করত না এবং এটি অন্যান্য ওয়েবকিট ব্রাউজারগুলিতে (সাফারি এর মতো) প্রভাবিত করে না বলে মনে হয়। লোকেরা 3 ডি ট্রান্সফর্মগুলির সাথে একই ধরণের সমস্যার মুখোমুখি হওয়ার বিষয়ে আরও কিছু পোস্ট ছিল তবে এটি 2 ডি রূপান্তর সম্পর্কে কিছুই খুঁজে পাচ্ছে না।

কোন ধারণা প্রশংসা করা হবে, ধন্যবাদ!

google-chrome  css  webkit  transform  css-animations 
— রায়ান ও'রউর্ক
সূত্র
ফায়ারফক্স এবং আইই 10 ব্যবহার করে কেবল সাইটটি দেখেছেন, সমস্যাটি দেখবেন না। যদি এটি ক্রোমে সীমাবদ্ধ থাকে তবে আপনার নিজের এটি ঠিক করার জন্য আপনার গুগলের জন্য অপেক্ষা করতে হতে পারে।
— নোলোনার
আমি কোনও ঝাপসা দেখছি না ... আমি ক্রোম
— ভি
আমি আগেও এই সমস্যাটি পেরিয়ে এসেছি, নোলোনার যেমন উল্লেখ করেছেন আমাদের গুগল এটির সমাধানের জন্য অপেক্ষা করতে হবে।
— raj_n
কোনও সমাধান নয়, তবে আমি লক্ষ্য করেছি যে সমস্যাটি কেবল তখন আমার জন্য ঘটে যখন আমি সিএসএস অপ্টিমাইজযোগ্যতা ব্যবহার করি।
— ব্যাংককিয়ান
লিঙ্কটি নষ্ট হয়ে গেছে।
— টিমোথি003

উত্তর:

78

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

ব্যাকফেসের দৃশ্যমানতা লুকানো সমস্যাটিকে ঠিক করে দেয় কারণ এটি অ্যানিমেশনটিকে কেবলমাত্র বস্তুর সামনের অংশে সরল করে তোলে, যেখানে ডিফল্ট অবস্থাটি সামনে এবং পিছনে থাকে।

backface-visibility: hidden;

অ্যানিমেশনটিতে হার্ডওয়্যার ত্বরণ যুক্ত করার জন্য হ্যাক হওয়ায় এটি অনুবাদ করা কাজ করে। 

transform: translateZ(0);

এই দুটি বৈশিষ্ট্যই আপনার যে সমস্যাটি রয়েছে তা ঠিক করে দেয় তবে কিছু লোক যুক্ত করতেও পছন্দ করে 

-webkit-font-smoothing: subpixel-antialiased;

আপত্তি তাদের অ্যানিমেটেড। আমি দেখতে পাচ্ছি যে এটি কোনও ওয়েব ফন্টের রেন্ডারিং পরিবর্তন করতে পারে তবে সেই পদ্ধতিটি নিয়ে নিখরচায় পরীক্ষা করতে পারে।

— 2ne
সূত্র
12
এই কৌশলগুলি সমস্ত জিনিসগুলির উন্নতি করে বলে মনে হয়, তবে আমি ফায়ারফক্সে দেখতে পাচ্ছি যে ক্রোম একই ধরণের স্বচ্ছতার সাথে পেতে পারি না।
— মাইকেল মার্টিন-স্মুকার
13
backface-visibility: hidden;স্পষ্টতই আমার ক্ষেত্রে কাজ করেছে, কিছুটা অদ্ভুত অস্পষ্ট আন্দোলনের কারণকে অস্বচ্ছ রূপান্তর দ্বারা সমাধান করা, তা is অদ্ভুত আন্দোলনটি এখন চলে গেছে তবে এটি আমার ডিভের পাঠ্যগুলিকে স্থায়ীভাবে ঝাপসা করে দিয়েছে।
— আইটিউইচ
14
@ ইয়াকাদারু যেমন পরামর্শ দিয়েছেন, perspective(1px)আপনার কোডটিতে যুক্ত করার চেষ্টা করুন transform:, এটি ক্রোমে আমার জন্য কাজ করেছিল, অন্য কোনও সমস্যা সমাধান করার পরে
— সার্জ এরিমিভ
4
ক্রোম সংস্করণ 65.0.3325.162 (অফিশিয়াল বিল্ড) (-৪-বিট) উবুন্টুতে 17.10 তে জিনোম এক্স 11 সেশনের (ওয়েল্যান্ড অফ) চলমান কাজ করে না
— মেরেকি
3
ক্রোম 72 এ প্রথম দুটি বিকল্পের ফলে এবং রূপান্তরের শেষে পাঠ্যটি ঝাপসা হয়ে পড়ে
— ব্র্যান্ডিটো
24

অস্পষ্টতা উন্নত করতে, এসএসপি করুন। Chrome এ, এটি করার চেষ্টা করুন:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

আপডেট: দৃষ্টিভঙ্গি ব্যবহারকারী এবং জেড-প্লেনের মধ্যে দূরত্ব যুক্ত করে, যা প্রযুক্তিগতভাবে বস্তুকে স্কেল করে, অস্পষ্টতাটিকে 'স্থায়ী' বলে মনে হয়। perspective(1px)উপরে মত হল হাঁস-টেপ কারণ আমরা অস্পষ্টতা আমরা সমাধান করার চেষ্টা করছেন মিলে করছি। আপনার নীচের সিএসএসের সাথে আরও ভাল ভাগ্য হতে পারে:

transform: translateZ(0);
backface-visibility: hidden;
— ykadaru
সূত্র
4
আমার জন্য, এটি আসলে এটি আরও খারাপ করে।
— বালু
1
আমার জন্য এটি ভুলত্রুটি সংশোধন করে (এটি ছাড়াই, অ্যানিমেশনটি শেষ হওয়ার পরে উপাদানটি 1px স্থানান্তরিত করে, রূপান্তর করুন: দৃষ্টিকোণ (1px) একা এটি ঠিক করুন!)
— সের্গিউ
@ বালু আমার আপডেট হওয়া উত্তরটি পরীক্ষা করে দেখুন! perspective(1px)সম্পত্তি থেকে মুক্তি পান এবং দেখুন এটি আরও ভাল কাজ করে কিনা।
— ইয়াকাদারু
16

আমি দেখতে পেয়েছি যে স্কেল রেশিও সামঞ্জস্য করা কিছুটা সহায়তা করেছে।

scale(1.048)ওভার ব্যবহার করে (1.05)মনে হয়েছে পুরো পিক্সেল হরফ আকারের আরও ভাল সান্নিধ্য তৈরি হয়েছে, সাব-পিক্সেল অস্পষ্টতা হ্রাস করবে।

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

— জর্দান নাকামোটো
সূত্র
1
এটাই আমার জন্য একমাত্র পন্থা। অন্যান্য পন্থাগুলি (ব্যাকফেস-দৃশ্যমানতা, ফিল্টারগুলি, দৃষ্টিকোণ এবং ভাল পুরাতন অনুবাদ অনুবাদ যোগ করা) এটি আরও খারাপ করেছে। পুরো পিক্সেল স্কেলিং চেষ্টা করুন। উদাহরণস্বরূপ 1,1429 (16/14) এর স্কেল ফ্যাক্টরটি ব্যবহার করে 14px থেকে 16px এ যান।
— হুগো ডের হাঞ্জ্রিজে
1
আমার জন্য ছাড়া translateZ(0)1.051.048
— পরিশ্রম করেছেন
15

ভাগ্য না নিয়ে এখানে অন্য কিছুর চেষ্টা করার পরে অবশেষে আমার জন্য এই সমস্যাটি স্থির করে দিয়েছিল সম্পত্তিটি সরিয়ে দেওয়া was will-change: transform;কোনও কারণে এটি ক্রোমে ভয়াবহভাবে ঝাপসা দেখায় এমন স্কেলিং ঘটায়, তবে ফায়ারফক্স নয়।

— দেনিযেল
সূত্র
কেন কেউ এটিকে হ্রাস করবেন? আমি এটি পাই না ... :( এটি ক্রোমের কয়েকটি সংস্করণে সম্পূর্ণ বৈধ ইস্যু এবং সাধারণভাবে এটি "বদলে যাবে" এখনও বেশ নতুন এবং সম্ভবত ব্যবহার করা উচিত নয়। আরও তথ্যের জন্য গ্রিনসক দেখুন .com / will-change
— ডেন
একই সমস্যা ছিল। পোস্ট করার জন্য ধন্যবাদ।
— চোদা
ক্রোম 75-এ উপাদান-নকশা-উপাদানগুলি রেন্ডারিংয়ের সাথে আমার একই সমস্যা ছিল the "পরিবর্তিত" সিএসএস শৈলী সরানো এটি ঠিক করেছে।
— রব
ক্রোম 79 এ নিশ্চিত হয়েছে
— ফরিশ বিজয়রঙ্গম
1
আমার বিপরীতে রয়েছে, will-change: transform;সমস্যাটি কিছুটা সংশোধন করে
— জাকুব জাভিলাক
14

পরিবর্তে 

transform: scale(1.5);

ব্যবহার 

zoom : 150%;

Chrome এ টেক্সট অস্পষ্ট করার সমস্যাটি সমাধান করে।

— নাইশিল ভারধন
সূত্র
এটি সহায়তা করতে পারে তবে অন্যান্য সমস্যাগুলিরও পরিচয় দেয়, যেমন সাদা সীমান্ত রেখাগুলি কখনও কখনও চালু করা হয়
— কেভিন
1
নিচে কেন জানি না। আমি যখন এটি চেকবাক্সগুলিতে প্রয়োগ করি তখন এটি রূপান্তরের চেয়ে আরও ভাল কাজ করে: স্কেল ()
— ব্রায়ান ম্যাককেল
2
ফায়ারফক্সের জন্য, রূপান্তর ব্যবহার করুন: স্কেল () কোনও অস্পষ্টতা ছাড়াই কবজির মতো কাজ করে। আপনাকে ব্রাউজার সনাক্তকরণে কাজ করতে হবে এবং ক্রোম / সাফারি এবং ফায়ারফক্সের জন্য সেই অনুযায়ী কাজ করতে হবে।
— নাইশিল ভারধন
15
আরেকটি সমস্যা হ'ল জুমটি রূপান্তর সম্পত্তি নিয়ে কাজ করছে বলে মনে হচ্ছে না, তাই এটি সিএসএস অ্যানিমেশনগুলির জন্য ব্যবহার করা যাবে না
— এরিকগ্রোস
3
এটি অস্পষ্ট জিনিসটি কাজ করে এবং শিয়াল করে তবে এটি উপাদানগুলির অবস্থানও পরিবর্তন করে।
— ব্যবহারকারী 1156544
8

এটি অবশ্যই ক্রোমের সাথে একটি বাগ (সংস্করণ 56.0.2924.87) হওয়া উচিত, তবে কনসোলে সিএসএস বৈশিষ্ট্যগুলি পরিবর্তন করার সময় নীচে আমার জন্য অস্পষ্টতা ঠিক করে ('। 0')। আমি এটি রিপোর্ট করব।

filter: blur(.0px)
— andyw
সূত্র
1
আপনি কি আপনার বাগ রিপোর্টটি দিয়ে কোথাও পেয়েছেন?
— ডায়াজল
ভয় আমি এমনকি কোথায় বাগটি জমা দিয়েছিলাম তা মনে করতে পারছি না। যদিও তাই করেছেন।
— অ্যান্ডি
আমি বুটস্ট্র্যাপ (4.4.1), ক্রোম (80.0.3987.132), উইন্ডোজ 10 (দেখুন 125% স্কেল আপ) এবং ড্রপডাউন মেনুতে আমার অস্পষ্ট লেখা রয়েছে texts মেনুটি ব্যবহার করে অবস্থিত transform: translate3d();এবং এটি সমস্যার কারণ বলে মনে হচ্ছে। প্রস্তাবিত সমাধানগুলির কোনওোটাই আমার পক্ষে কাজ করেনি। এটাকে / কিন্ডা বাদে। এটি কেবল তখনই কাজ করে যদি আমি এটিকে প্রথমে কিছু ইতিবাচক মান (উদাহরণস্বরূপ blur(0.1px)) এবং তারপরে পরিবর্তন করে blur(0px)। যেহেতু উপাদানটি গতিশীল, এবং এছাড়াও একটি গতিশীল (জেএস) সমাধান প্রয়োজন, ... এটি
— সফলভাবে
7

সুন্দরগুলি আমাকে উত্তরের দিকে নিয়ে যায়। ব্যতীত filter: scaleঅস্তিত্ব নেই, তবে রয়েছে filter: blur।

অস্পষ্ট প্রদর্শিত উপাদানগুলিতে পরবর্তী ঘোষণাগুলি প্রয়োগ করুন (আমার ক্ষেত্রে তারা পরিবর্তিত উপাদানের অভ্যন্তরে ছিল): 

backface-visibility: hidden;    
-webkit-filter: blur(0);

এটি প্রায় নিখুঁতভাবে কাজ করেছে। " প্রায়শই " কারণ আমি একটি রূপান্তর ব্যবহার করছি এবং রূপান্তরকালে, উপাদানগুলি নিখুঁত দেখায় না, তবে একবার রূপান্তরটি শেষ হয়ে গেলে তারা তা করে।

— ruidovisual
সূত্র
-webkit-filter: blur(0);একা আমার জন্য কাজ করে। backface-visibility: hidden;আমি যখন পরে স্কেলিংটি পুনরায় সেট করি তখন আমার উপাদানটিকে ঝাপসা করে।
— কাই হার্টম্যান
এটি ক্রোমের জন্য মজার বিষয় ... আমি যদি সেট blur(0px);করে রাখি তবে এটি ঠিক করে না। তবে যদি আমি এটি করি blur(1px);এবং তারপরে তীরটি নীচে কী টিপুন তবে blur(0px);এটি সঠিক দেখাচ্ছে। পৃষ্ঠায় রিফ্রেশে গিয়েছি / আমি CSS এ যা লিখি তা নির্বিশেষে
— টম রোগেরো
1
@ টমগ্রোগেরো এটি অস্পষ্ট সম্পত্তি মানটির সাথে কম সুনির্দিষ্ট বলে মনে হচ্ছে এবং লেআউটটি পুনর্নির্মাণ করার সময় আরও বেশি। আপনি কিছুটা বিলম্বের পরে জাভাস্ক্রিপ্ট ব্যবহার করে উপাদান পুনরায় আঁকতে বাধ্য করতে পারেন।
— গজুস
5

আমি জানতে পেরেছি যে সমস্যাটি যে কোনও উপায়ে আপেক্ষিক রূপান্তরিত হয়। ট্রান্সলেট এক্স (50%), স্কেল (1.1) বা কি কখনও। পরম মান প্রদান সর্বদা কাজ করে (অস্পষ্ট পাঠ্য উত্পন্ন করে না)।

এখানে উল্লিখিত সমাধানগুলির কোনওটিই কাজ করে নি, এবং আমি মনে করি যে এর কোনও সমাধান নেই, এখনও (ক্রোম 62.0.3202.94 ব্যবহার করার সময় আমি এটি লিখছি)।

আমার ক্ষেত্রে transform: translateY(-50%) translateX(-50%)অস্পষ্টতার কারণ হয় (আমি একটি কথোপকথনকে কেন্দ্র করতে চাই)।

আরও কিছুটা "পরম" মানগুলিতে পৌঁছতে, আমাকে দশমিক মান সেট করতে হয়েছিল transform: translateY(-50.09%) translateX(-50.09%)।

বিঃদ্রঃ

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

— scipper
সূত্র
আমি ঠিক একই জিনিস করতে এই একই একই সমস্যা চালাচ্ছিলাম। আমি অনুবাদ 3 ডি (-50%, -50%, 0) দিয়ে একটি মডেল কেন্দ্র করছিলাম center আমার ক্ষেত্রে, আমি মানগুলি -50.048% এ ছড়িয়ে দিয়েছি এবং এটি নিখুঁত দেখাচ্ছে।
— ক্রিস গুতেরেজ
3

আপনি zoom: 101%;যখন জুম + স্কেলের সংমিশ্রণটি ব্যবহার করতে পারবেন না তখন জটিল ডিজাইনের জন্য ব্যবহার করার চেষ্টা করুন ।

— টম রোগেরো
সূত্র
নোট যে zoomকোনও ওয়েব স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত করা হয় নি এবং ফায়ারফক্স ক্যানিউজ.com
— #
3

আমার ক্ষেত্রে নিম্নলিখিত কোডগুলি অস্পষ্ট ফন্টের কারণ করেছে:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

এবং কেবল জুম সম্পত্তি যুক্ত করা আমার জন্য এটি স্থির করে। জুম নিয়ে ঘুরে দেখি, নিম্নলিখিতগুলি আমার জন্য কাজ করেছে:

zoom: 97%;
— রাজা আহমেদ
সূত্র
4
এর জন্য কোনও ফায়ারফক্স সমর্থন নেইzoom
— ডাস্টিন পোয়েসেন্ট
3

Chrome এ আমি অস্পষ্ট রূপান্তরগুলি (ট্রান্সলেটেড 3 ডি, স্কেলএক্স) সন্ধান করার জন্য আরও একটি সমাধান হ'ল উপাদানটিকে " প্রদর্শন: ইনলাইন-টেবিল ;" হিসাবে সেট করা । এটি কোনও ক্ষেত্রে পিক্সেলকে রাউন্ডিং করার জন্য বলে মনে হচ্ছে (এক্স অক্ষের উপরে)।

আমি পড়লাম Chrome এর অধীনে সাবপিক্সেল অবস্থানের উদ্দেশ্য ছিল এবং ডেভস এটি ঠিক করবে না।

— Corentin
সূত্র
3

2019 আপডেট
ক্রোম ডিসপ্লে বাগটি এখনও ফিক্সড নয় যদিও পৃষ্ঠপোষকদের কোনও দোষ নেই, এই ওয়েবসাইটের পুরোপুরি দেওয়া প্রস্তাবগুলির কোনওটিই সমস্যা সমাধানে সহায়তা করে না। আমি একমত হতে পারি যে আমি তাদের প্রত্যেককেই নিরর্থকভাবে চেষ্টা করেছি: কেবল 1 টি কাছে আসে এবং এটিই সিএসএস নিয়ম: ফিল্টার: ব্লার (0); যা 1 পিক্স দ্বারা ধারক স্থানান্তরিতকরণকে সরিয়ে দেয় তবে ধারকটির এবং এটিতে থাকা কোনও বিষয়বস্তুর ঝাপসা ডিসপ্লে বাগ সমাধান করে না।

বাস্তবতা এখানে: আক্ষরিকভাবে এই সমস্যার কোনও সমাধান নেই তাই এখানে তরল ওয়েবসাইটগুলির জন্য কাজ করা হচ্ছে

CASE
আমি বর্তমানে একটি তরল ওয়েবসাইট বিকাশ করছি এবং 3 ডিভ রয়েছে, সবগুলি প্রস্থ এবং অবস্থান উভয় ক্ষেত্রেই হোভার ইফেক্ট এবং ভাগ শতাংশের ভাগকে কেন্দ্র করে। ক্রোম বাগটি কেন্দ্রের ধারকটিতে ঘটে যা বামে সেট করা থাকে: 50%; এবং রূপান্তর: অনুবাদ এক্স (-50%); একটি সাধারণ সেটিং।

উদাহরণ: প্রথম এইচটিএমএল ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

এখানে সিএসএস যেখানে ক্রোম বাগ ঘটে ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

এখানে স্থির সিএসএস ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

বাগড ফিডল: https://jsfiddle.net/m9bgrunx/2/
ফিক্সড ফিডল: https://jsfiddle.net/uoc6e2dm/2/

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

— SJacks
সূত্র
অনুবাদ ব্যবহার করার সময় অস্পষ্টতা প্রত্যাশিত, কারণ উপাদানটি অর্ধ পিক্সেল পর্যন্ত শেষ হতে পারে । কেন্দ্রিক জিনিসগুলির জন্য আরও ভাল বিকল্প রয়েছে: ফ্লেক্সবক্স নমুনা , গ্রিডের নমুনা
— তিথি 00 য়
রূপান্তর কেন্দ্রের সাথে সমস্যা দেখা গেছে বলে মনে করা হয়েছে এমন একমাত্র ব্রাউজারটি হ'ল ক্রোম, অন্য সমস্ত কিছুই স্ফটিক পরিষ্কার appears আমি পিছনে তাকালাম এবং এই সমস্যাটি প্রায় 7 বছর ধরে! এখনও একটি বিড়ালকে চামড়া দেওয়ার প্রচুর উপায় রয়েছে এবং আপনি যেমন বলেন যে এটি আর প্রয়োজন হয় না।
— এসজে্যাকস
এটি অবিশ্বাস্য তবে ফিল্টার: অস্পষ্টতা (-0.1px); আমাকে সাহায্য করে ছিল !!. কিভাবে এই কাজ করে ??
— jt3k
3

আমারও একই সমস্যা আছে। আমি এটি ব্যবহার করে এটি ঠিক করেছি:

.element {
  display: table
}
— রবি
সূত্র
2
উন্মাদ কিন্তু এটি কাজ করে; ক্রোম হ'ল দৃশ্যমানভাবে নতুন আইই
— আর্থার
হুজুর! আমি কাজ! আমার ধারণা, পিএক্স-তে টেবিল 'ফিক্স' ডি প্রস্থ অর্ধ-পিক্সেল দিয়ে প্রস্থ সম্ভব হয়নি ...
— লুয়ানলুয়ান লুয়ান
2

উপরের কেউই আমার পক্ষে কাজ করেনি। পপআপগুলির জন্য আমার এই অ্যানিমেশনটি ছিল:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

আমার ক্ষেত্রে এই নিয়মটি প্রয়োগ করার পরে অস্পষ্ট প্রভাবটি চলে গেছে: -webkit-perspective: 1000;যদিও এটি ক্রোম পরিদর্শককে অব্যবহৃত হিসাবে চিহ্নিত করা হয়েছে।

— Gendos-UA
সূত্র
এটি আমার পক্ষে কাজ করে এবং এটি অব্যবহৃত হিসাবে চিহ্নিত করা হয়। আমি এও যুক্ত করেছি will-change: transform;যে উপাদানগুলির সীমানাকে অস্পষ্ট করে তোলে। অন্য কোনও উত্তর আমার পক্ষে কাজ করেনি।
— জাকুব জাভিলাক
2

আমার সমাধানটি ছিল:

প্রদর্শন: প্রাথমিক;

তারপরে ক্রিস্পি ধারালো ছিল

1

উপরের কেউই আমার পক্ষে কাজ করেনি।

আমি যখন দৃষ্টিভঙ্গি যুক্ত করেছি তখন এটি কাজ করেছিল

অর্থাত্ থেকে

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

আমি বদলেছি

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

— সেনগুপ্ত অমিত
সূত্র
সংযোজন perspective(1px)আসলে আমার জন্য আরও খারাপ করেছে :(
— বলু
1

আমি যুক্ত করে আমার কেস ঠিক করেছি:

transform: perspective(-1px)
— অ্যান্ডারস লন্ড
সূত্র
এটি আমার জন্য কেবল scale()রূপান্তর ফলাফলটি সরিয়ে দিয়েছে
— jpna
1

কাজের জন্য:

আমি এখানে সমস্ত পরামর্শ চেষ্টা করেছি। কিন্তু কাজ হয়নি। আমার কলেজটি একটি দুর্দান্ত সমাধান পেয়েছে, এটি আরও ভাল কাজ করে:

আপনার গত 1.0 কে স্কেল করা উচিত নয়

এবং translateZ(0)হোভারের অন্তর্ভুক্ত করুন তবে কোনওটি-হোভার / প্রাথমিক অবস্থানে নেই।

উদাহরণ:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}
— JonasB
সূত্র
1

আমি সমস্ত উত্তরের সমন্বয় ব্যবহার করেছি এবং এটিই আমার পক্ষে শেষ পর্যন্ত কাজ করেছিল:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
— কাইল আন্ডারহিল
সূত্র
1

আমি Chrome এ অস্পষ্ট লেখার সমস্যার মুখোমুখি হয়েছি কিন্তু ফায়ারফক্সে ব্যবহার করার সময় ছিলাম না transform: translate(-50%,-50%)।

ঠিক আছে, আমি সত্যিই অনেকগুলি কাজের চেষ্টা করেছি:

transform: perspective(1px);
filter: blur(0);
transform: translateZ(0);
backface-visibility: hidden;

এগুলির কোনওটিই আমার পক্ষে কাজ করেনি।

অবশেষে, আমি উপাদানটির উচ্চতা এবং প্রস্থকে এমনকি তৈরি করেছিলাম। এটা আমার জন্য সমস্যা সমাধান !!!

দ্রষ্টব্য: এটি ক্ষেত্রে ব্যবহারের ক্ষেত্রে নির্ভর করতে পারে depend তবে অবশ্যই চেষ্টা করার মতো!

— Prajwal_Shenoy
সূত্র
1

আমি এই উত্তরগুলি থেকে অনেকগুলি উদাহরণ চেষ্টা করেছি দুর্ভাগ্যক্রমে Version 81.0.4044.138 ক্রমের পরিবর্তে উপাদানটির পরিবর্তনে আমি কোনওরকম সহায়তা করি নি

 transform-origin: 50% 50%;

এইটা 

 transform-origin: 51% 51%;

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

— ওলেগ বান্দারেঙ্কো
সূত্র
0

আমার জন্য সমস্যাটি ছিল আমার উপাদানগুলি ব্যবহার করছিল transformStyle: preserve-3d। আমি বুঝতে পেরেছিলাম যে অ্যাপ্লিকেশনটির জন্য এটি আসলে প্রয়োজন হয়নি এবং এটিকে অপসারণ করা অস্পষ্টতাটি স্থির করে।

— Normangorman
সূত্র
0

আমি এটিকে আমার কোড থেকে সরিয়েছি - transform-style: preserve-3d; এবং এটি-transform: perspective(1px) translateZ(0);

অস্পষ্টতা চলে গেল!

— তানহা ইসলাম
সূত্র
0

ক্রোম 74.0.3729.169, বর্তমান 5-25-19-তে, রূপান্তরিত হওয়ার কারণে নির্দিষ্ট ব্রাউজার জুম স্তরে অস্পষ্ট হওয়ার জন্য কোনও ঠিক আছে বলে মনে হচ্ছে না। এমনকি একটি সাধারণ TransformY(50px)উপাদানটি অস্পষ্ট করে দেবে। এটি ফায়ারফক্স, এজ বা সাফারি এর বর্তমান সংস্করণগুলিতে ঘটে না এবং এটি সমস্ত জুম স্তরে ঘটে বলে মনে হয় না।

— অস্টিন ম্যাককুল
সূত্র
এটাই আমার ঘটেছে। আমি এই অস্পষ্ট প্রভাব থেকে মুক্তি পেতে পারি না। একটি সমাধান যা কাজ করেছে সেগুলি হ'ল এই বৈশিষ্ট্যগুলি সেট করা: top: 0, bottom: 0, left: 0; right: 0; margin: autoতবে তারপরে ধারকটি এটি করতে পারে পুরো জায়গাটি নেবে (এটি প্রস্থ হওয়া আবশ্যক), সুতরাং কন্টেন্টটি কত বড় ধারক হবে তা সিদ্ধান্ত নেওয়ার ক্ষেত্রে এটি কার্যকর হয় না।
— kwiat1990
0

এটি কেবল সিএসএস দিয়ে সমাধান করা কঠিন হবে।

সুতরাং আমি jquery দিয়ে এটি সমাধান।

এটি আমার সিএসএস।

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

এবং এই আমার jquery হয়।

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}
— madstone
সূত্র
0

কেবল cra বর্ডার: 1 পিক্সল কঠিন # ??? putting লাগিয়ে ঠিক করার ক্রেজে যুক্ত করার জন্য আমার পক্ষে সমস্যাটি সমাধান করে badly আপনার যদি স্থিতিশীল পটভূমির রঙ থাকে তবে এটিও বিবেচনা করুন। এটি এতটাই মূক নুনের কথা ভাবাচ্ছে আমার অনুমান, হ্যাঁ।

— user1769038
সূত্র
-1

filterএটি ঠিক করতে আপনি CSS ব্যবহার করতে পারেন ।

.element {
    filter: blur(0);
}

বিক্রেতা-উপসর্গ সম্পর্কে, নিজের দ্বারা এটি করুন। -webkit-filter, -ms-filter। বিশদটি এখানে http://browser.colla.me/show/css_transformation_scale_cause_blurring

— sunderls
সূত্র
— মোমজিলা.আর.জে / ডোনস / ওয়েবে / সিএসএস / ফিল্টার
উত্তরে রেফারেন্সযুক্ত ইউআরএল অনুযায়ী এটি অস্পষ্ট হওয়া উচিত।
— সার্ডটোক
-1

পাঠ্যটি অস্পষ্ট হবে না যদি আপনি এটি না transitionকরেন transform।

শুধু এটি করুন:

&:hover {
    transform: scale(1.1);
}

মত ট্রানজিশন ছাড়াtransition: all .2s;

— kyw
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.