CSS-overgangseffect maakt afbeelding wazig / beweegt Afbeelding 1px, in Chrome?

Ik heb een aantal CSS die op HOVER, een CSS-transitie-effect beweegt een div.

Het probleem, zoals u in het voorbeeld kunt zien, is dat de translateTransitie heeft de vreselijke bijwerking van het maken van de afbeelding in de div-beweging door 1px Down / Right (en mogelijk het formaat van SO Iets?) Zodat het uit de plaats en onscherp lijkt …

De glitch lijkt de hele tijd toe te passen Het zweeftijdseffect wordt toegepast en van een proces van proef en fout kan ik veilig zeggen dat het alleen maar lijkt te voorkomen wanneer de Transitie van de Vertaal de Div (Doosschaduw en Dekking wordt toegepast, maar Geen verschil voor de fout bij het verwijderen).

Het probleem lijkt alleen te gebeuren wanneer de pagina scrollbars heeft. Dus het voorbeeld met slechts één exemplaar van de DIV is prima, maar nogmaals worden identieke divs toegevoegd en de pagina vereist daarom een ​​schuifbalk die het probleem weer slaat …

Antwoord 1, Autoriteit 100%

2020 update

• Als u problemen met wazig afbeeldingen hebt, controleer dan ook de antwoorden van hieronder, vooral de image-renderingCSS-onroerend goed.
• voor de beste praktijk toegankelijkheid en SEO WISE U kunt de achtergrondafbeelding vervangen door een <img>tag met Object-fit CSS-onroerend goed.

Origineel antwoord

Probeer dit in uw CSS :

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

Wat dit doet, maakt het de divisie om “meer 2D” te gedragen.

• backface wordt als standaard getekend om draaiende dingen met roteren mogelijk te maken
  en zo. Het is niet nodig als u alleen naar links, rechts, omhoog, omlaag, schaal of draait (tegen-) met de klok mee bewaart.
• Vertaal z-as om altijd een nulwaarde te hebben.
• Chrome handvat nu backface-visibilityen transformzonder de -webkit-voorvoegsel. Ik weet momenteel niet hoe dit andere browsers beïnvloedt (FF, IE), dus gebruik dus de niet-voorvoegde versies met de nodige voorzichtigheid.

Antwoord 2, Autoriteit 36%

U moet 3D-transformatie aan het element toepassen, zodat deze zijn eigen composietlaag krijgt.
Bijvoorbeeld:

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

of

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

Meer over Layer Creation Criteria U kunt hier lezen: versneld rendering in Chrome

een uitleg:

Voorbeelden (Hover Green Box):

• Probleem: Transitie kan een knipperend effect veroorzaken op broer en zus elementen (OSX Lion, Chrome 30)
• oplossing: een element op zijn eigen composietlaag

Wanneer u een overgang op uw element gebruikt, veroorzaakt u browser om stijlen opnieuw te berekenen en vervolgens uw inhoud opnieuw in te stellen, zelfs als de overgangseigenschap visueel is (in mijn voorbeelden is het een dekking) en een klein element:

Het probleem is hier opnieuw lay-out van de inhoud die een effect kan maken van “dansen” of “knipperende” elementen op de pagina terwijl de transitie plaatsvindt.
Als u naar Instellingen gaat, vinkt u het selectievakje “Show Composite Layers” aan en breng vervolgens 3D-transformatie aan op een element, u zult zien dat het de eigen laag krijgt die is geschetst met oranje rand.

Nadat het element zijn eigen laag krijgt, hoeft de browser alleen maar te composieten lagen op transitie zonder re-lay-out of zelfs verfbewerkingen, zodat het probleem moet worden opgelost:

Antwoord 3, autoriteit 17%

Had hetzelfde probleem met het ingebedde YouTube-iframe (vertalingen werden gebruikt om het iframe-element te centreren). Geen van de bovenstaande oplossingen werkte totdat je css-filters resetprobeerde en er magie gebeurde.

Structuur:

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

Stijl [voor]

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

Stijl [naar]

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

Antwoord 4, autoriteit 13%

Ik heb een experimenteel nieuw CSS-attribuut aanbevolen dat ik in de nieuwste browser heb getest en het is goed:

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+                */

Hiermee kent de browser het algoritme voor weergave

Antwoord 5, autoriteit 2%

Zojuist nog een reden gevonden waarom een ​​element wazig wordt wanneer het wordt getransformeerd. Ik gebruikte transform: translate3d(-5.5px, -18px, 0);om een ​​element opnieuw te positioneren nadat het was geladen, maar dat element werd wazig.

Ik heb alle bovenstaande suggesties geprobeerd, maar het bleek dat ik een decimale waarde gebruikte voor een van de vertaalwaarden. Hele getallen veroorzaken de vervaging niet, en hoe verder ik van het hele getal verwijderd was, hoe erger de vervaging werd.

d.w.z. 5.5pxvervaagt het element het meest, 5.1pxhet minst.

Ik dacht ik gooi dit hier even neer voor het geval iemand er iets aan heeft.

Antwoord 6

Ik heb het probleem omzeild door stapsgewijze overgang te gebruiken, niet soepel

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

Het is geen oplossing, het is bedrog en kan niet overal worden toegepast.

Ik kan het niet uitleggen, maar het werkt voor mij. Geen van de andere antwoorden helpt me (OSX, Chrome 63, Non-Retina-display).

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

Antwoord 7

Opschalen naar verdubbelen en terugbrengen naar de helft met zoomwerkte voor mij.

transform: scale(2);
zoom: 0.5;

Antwoord 8

Probeer filter: blur(0);

Het werkte voor mij

Antwoord 9

Ik heb ongeveer 10 mogelijke oplossingen geprobeerd. Heb ze door elkaar gehaald en ze werkten nog steeds niet goed. Er was altijd 1px shake aan het einde.

Ik vind een oplossing door de overgangstijd op het filter te verkorten.

Dit werkte niet:

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

Oplossing:

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

Probeer dit in viool:

.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>

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;
}

.ok {
      transform: perspective(100px) rotateY(0deg) scale(0.5);
      transition: transform 1s;
      object-fit:contain;
}
.ok:hover{
      transform: perspective(100px) rotateY(-10deg) scale(0.5);
}
/* Demo Preview Stuff */
.bad {
   max-width: 320px;
   object-fit:contain;
   transform: perspective(100px) rotateY(0deg);
   transition: transform 1s;
}
.bad:hover{
      transform: perspective(100px) rotateY(-10deg);
}
div {
     text-align: center;
     position: relative;
     display: flex;
}
h3{
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}
.b {
    display: flex;
}

<center>
<h2>Hover on images</h2>
<div class="b">
<div>
  <img class="ok" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Sharp</h3>
</div>
<div>
  <img class="bad" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Blurry</h3>
</div>
</div>
</center>

#before
<header class="container">
      <div class="transformed div">
          <span class="transform wrapper">
            <span class="transformed"></span>
            <span class="transformed"></span>
          </span>
       </div>
       <div class="affected div">
       </div>
     </header>
#after
<header class="container">
   <div class="affected div">
   </div>
  <div class="transformed div">
      <span class="transform wrapper">
        <span class="transformed"></span>
        <span class="transformed"></span>
      </span>
   </div>
 </header>

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

img {
  image-rendering: -webkit-optimize-contrast;
}
@keyframes scale-in-left {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1.000001);
    opacity: 1;
  }
}

@keyframes scale-in-left {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}