চিত্রটি হোভার - ক্রোম অস্বচ্ছতার ইস্যুতে চলে

Question

আমার পৃষ্ঠাটিতে এখানে কোনও সমস্যা রয়েছে বলে মনে হচ্ছে: http://www.lonewulf.eu

থাম্বনেইলগুলির উপরে ঘোরাফেরা করার সময় চিত্রটি ডানদিকে কিছুটা সরানো হয় এবং এটি কেবল ক্রোমে ঘটে।

আমার সিএসএস:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Comments

আমার পক্ষে সরবে না22.0.1229.94 m

— ড্যানি

চিত্রটিকে নিজেরাই নয়, একটি ট্যাগকে হোভার লাগানো সেরা অনুশীলন।

— ডায়োডিয়াস - জেমস ম্যাকফার্লেন

হ্যাঁ .আইএমজি একটি হরেফ শ্রেণি। আমার কি এটির আলাদা নাম দেওয়া উচিত? সম্ভবত এখন এটি <img src> এর সাথে বিরোধ করছে? সম্পাদনা: এনভিএম, আমি নামটি আইএমজি থেকে। থম্বে পরিবর্তন করেছি এবং এখনও এই সমস্যাটি রয়েছে। অন্য কোন পরামর্শ?

— জেফস

এটি সম্ভবত ফেন্সিবক্স কিছু করছে।

— ডায়োডিয়াস - জেমস ম্যাকফার্লেন

জেড অক্ষের উপর অনুবাদ ব্যবহার করা আমার জন্য একমাত্র সমাধান ছিল যেটি কাজ করেছিল: stackoverflow.com/questions/12502234/…

— ল্যারি

Answer 1

আরেকটি সমাধান ব্যবহার করা হবে

-webkit-backface-visibility: hidden;

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

আরও তথ্যের জন্য http://css-tricks.com/almanac/properties/b/backface-visibility/ দেখুন ।

Comments

এটি সঠিক উত্তর, তবে আপনাকে বলতে হবে যে backface-visibilityসম্পত্তিটি imgউপাদানটির উপর সেট করতে হবে । আমার ক্ষেত্রে, যে উপাদানটির অস্বচ্ছতা রয়েছে তা হ'ল aএলিমেন্টটি মোড়ানো img, সুতরাং আপনার উত্তরটি আমার পক্ষে নিখুঁত ছিল না। বিটিডব্লিউ, আমি ম্যাকের জন্য ফায়ারফক্সেও এই ত্রুটিটি পেয়েছি, সুতরাং আমি প্রতিটি বিক্রেতার উপসর্গ ব্যবহার করার পরামর্শ দিই।

— অলিবয় 50

@ অলিবয় ৫০ দুঃখিত, আমাকে এ নিয়ে তর্ক করতে হবে। আমার ক্ষেত্রে IM, ত্রুটিপূর্ণ উপাদান ছিল নিছক খালি divসঙ্গে গুলি background-image। @ পালিপাগো সমাধানের জন্য ধন্যবাদ!

— Bonflash

এটি আমার পক্ষে কাজ করেছে তবে আমার চিত্রগুলি মসৃণ পরিবর্তে খারাপ, পিক্সেলটেড দেখায়।

— কিয়েরান হান্টার

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

— Shnibble

আমার z-indexজন্য সঠিকভাবে কাজ করার জন্য হোভার ইফেক্ট পেতে আমাকে একটি যুক্ত করতে হয়েছিল।

— জ্যাক

Answer 2

কিছু কারণে ক্রোম 1 এর অস্বচ্ছতা ছাড়াই উপাদানের অবস্থানকে আলাদাভাবে ব্যাখ্যা করে। আপনি যদি position:relativeআপনার a.img উপাদানগুলিতে CSS বৈশিষ্ট্য প্রয়োগ করেন তবে তাদের অস্বচ্ছতা পরিবর্তিত হওয়ায় আর বাম / ডান চলাচল করতে হবে না।

Comments

কেউ কি জানো এটা কেন? নিশ্চয়ই এটি একটি লেআউট জিনিস নয়?

— সিডোনাল্ডসন

এখনই ফায়ারফক্সে একই সমস্যা ছিল। আপেক্ষিক এটি ঠিক করে নি, তবে উপাদানটিতে এটি সেট করে - transform: translate3d(0px,0px,0px);

— কনরলুডি

আমার সাফারিতে একই সমস্যা ছিল এবং আমি transform: translate3d(0px,0px,0px);কাজ করেছি

— zevnicsca

Answer 3

আমার একই সমস্যা ছিল, আমি এটি সিএসএস ট্রান্সফর্ম রোটেটের সাথে ঠিক করেছি। এটার মত:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

এটি প্রধান ব্রাউজারগুলিতে দুর্দান্ত কাজ করে।

Comments

এর জন্য ধন্যবাদ. এটি ফায়ারফক্সে এটি স্থির! : ডি

— হান্স ওয়াসিংক

হ্যাঁ আমাকেও। ব্যাকফেস কৌশলটি আমার পক্ষে কাজ করে নি (img ভিতরে একটি) তবে এটি একটি করেছে! ধন্যবাদ!

— মিক্মিক্মিক

আমার (ক্রোম) জন্য এটিই একমাত্র উত্তর worked ধন্যবাদ!

— কিড ডায়মন্ড

Answer 4

আর একটি সমাধান যা আমার জন্য এই সমস্যাটিকে স্থির করেছিল তা হ'ল বিধি যুক্ত করা:

will-change: opacity;

আমার বিশেষ ক্ষেত্রে এটি translateZ(0)ক্রোমের জিনিসগুলি স্থির করে সত্ত্বেও, একই ধরণের পিক্সেল-জাম্পিং ইস্যু এড়িয়ে গেছে যা ইন্টারনেট এক্সপ্লোরার-এ চালু হয়েছিল।

অন্যান্য সমাধানের মধ্যে অধিকাংশই এখানে যে জড়িত রূপান্তরগুলির (যেমন। translateZ(0), rotate(0), translate3d(0px,0px,0px), ইত্যাদি) হস্তান্তর জিপিইউ হাতে উপাদান পেন্টিং দ্বারা কাজ, আরও দক্ষ রেন্ডারিং দেয়। will-changeসম্ভবত ব্রাউজারটিকে একটি ইঙ্গিত সরবরাহ করে যা সম্ভবত এটির মতো একই প্রভাব ফেলে (ব্রাউজারটি আরও কার্যকরভাবে রূপান্তরটি রেন্ডার করতে দেয়) তবে কম হ্যাকি অনুভব করে (যেহেতু এটি জিপিইউ ব্যবহারের জন্য ব্রাউজারকে কেবলমাত্র ঝাঁকুনির পরিবর্তে সমস্যার সমাধান করে) addressing

এটি বলার পরেও , এটি মনে রাখা উচিত যে ব্রাউজার সমর্থনটি তেমন ভাল নয় will-change(যদিও সমস্যাটি যদি ক্রোমের সাথে থাকে তবে এটি কেবল ভাল জিনিস হতে পারে!) এবং কিছু পরিস্থিতিতে এটি তার নিজস্ব সমস্যার পরিচয় দিতে পারে তবে এখনও , এটি এই সমস্যার আর একটি সম্ভাব্য সমাধান।

Answer 5

এই ত্রুটি রোধ করতে আমার উভয়ই নিয়ম backface-visibilityএবং transformবিধি প্রয়োগ করা দরকার ছিল । এটার মত:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Answer 6

হোভারে (অস্পষ্ট নয়) ফিল্টারগুলি নিয়ে আমার একই সমস্যা ছিল। এর সাথে বেস শ্রেণিতে একটি নিয়ম যুক্ত করে স্থির করা হয়েছে:

filter: brightness(1.01);

Comments

হোভারে ফিল্টার স্থানান্তর সহ একই সমস্যা। এটি আমার জন্য এটিও স্থির করে দিয়েছে।

— জোশ হ্যারিসন

ফিল্টার ব্যবহার: উজ্জ্বলতা (1); img উপাদানটি এটি আমার জন্য স্থির করে দিয়েছে, আপনাকে ধন্যবাদ

— সায়

এইটি আমার জন্য কাজ করেছিল, হোভারে থাকা কোনও চিত্রটিতে গ্রেস্কেল ফিল্টার প্রয়োগ করার সময় একটি 1px সমস্যা ছিল। ব্রাউজার ডেভস এই সমস্ত জিনিস শেষ পর্যন্ত ঠিক করতে পারে না কেন? আমাকে ব্যাকফেস-দৃশ্যমানতা এবং সেগুলি সমস্ত জিনিস কেন ব্যবহার করতে হবে ....

— ভারিন

এটি এটি ঠিক করে, তবে রূপান্তর অ্যানিমেশন কাজ বন্ধ করে দেয়

— আমিন

Answer 7

ব্যাকফেস-ভিজিবিলিটি (বা -উবকিট-ব্যাকফেস-ভিজিবিলিটি) কেবল আমার জন্য ক্রোমে সমস্যাটি স্থির করেছে। ফায়ারফক্স এবং ক্রোম উভয়ই ঠিক করতে আমি উপরের উত্তরের নিম্নলিখিত সংমিশ্রণটি ব্যবহার করেছি।

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Answer 8

আমি সাফারি ৮.০.২ তে একই ধরণের সমস্যার মুখোমুখি হয়েছিলাম, যেখানে চিত্রগুলি তাদের অস্বচ্ছ রূপান্তরিত হওয়ার সাথে সাথে চিকিত্সা করবে। এখানে পোস্ট করা কোনও ফিক্স কাজ করেনি, তবে নিম্নলিখিতটি করেছেন:

-webkit-transform: translateZ(0);

এই উত্তরটি পরবর্তী উত্তরগুলির মাধ্যমে সমস্ত ক্রেডিট

Comments

অন্য সমস্ত উত্তর চেষ্টা করে দেখুন, এটিই প্রথম কাজ করেছিল!

Answer 9

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

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

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

Answer 10

সমাধান আল্পিপাগো এই সমস্যাটিতে আমাকে পরিবেশন করা হয়েছিল। এটি ব্যবহার -webkit-backface-visibility: hidden; করে চিত্রটি হোভার অস্পষ্ট রূপান্তরিত হতে পারে না

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Answer 11

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

সবচেয়ে অলস সমাধানটি আমি খুঁজে পেয়েছি যে এটি কেবলমাত্র আমার উপাদানটির জন্য একটি অস্বচ্ছতা সেট করুন যা খুব কাছে, তবে পুরোপুরি নয় 1.. এটি কেবল একটি সমস্যা যদি অস্বচ্ছতার 1 হয়, তাই এটি আমার অন্যান্য শৈলীর কোনওটিই ভেঙে বা হস্তক্ষেপ করবে না:

opacity:0.99999999;

Answer 12

রিক জিনারের উত্তরকে সঠিক হিসাবে চিহ্নিত করে আমি জানতে পেরেছি যে এটি সমস্যার সমাধান করে নি।

আমার ক্ষেত্রে আমার প্রতিক্রিয়াশীল প্রস্থের চিত্রগুলি একটি সর্বোচ্চ-প্রস্থের ডিভের মধ্যে রয়েছে images একবার সাইটের প্রস্থের সর্বোচ্চ প্রস্থ অতিক্রম করলে চিত্রগুলি হোভারের উপরে চলে যায় (সিএসএস ট্রান্সফর্ম ব্যবহার করে)।

আমার ক্ষেত্রে সমাধানটি হ'ল এই ক্ষেত্রে সর্বাধিক প্রস্থকে তিন, তিনটি কলামের একাধিকতে সংশোধন করা এবং এটি এটিকে পুরোপুরি ঠিক করে দিয়েছে।

Comments

মন্তব্যের জন্য ধন্যবাদ, আমি লক্ষ্য করেছি যে আপেক্ষিক অবস্থান সবসময় সমাধান হিসাবে কাজ করে না তাই যদি এই সমস্যাটি আবার উপস্থিত হয় আমি আপনার পদ্ধতিটিও চেষ্টা করব।

— জেফস

Answer 13

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

.yourclass:hover {
  /* opacity: 0.6; */
}

Answer 14

একই সমস্যা ছিল, আমার ফিক্সটি img ট্যাবে এসআরসি-র আগে ক্লাসটি স্থাপন করছিল।