Streaming live at 10am (PST)

Strange Interlacing


#1

Hi everyone,

I have stumbled upon a quite strange problem - images, which have a hover trigger that scale it, tend to be pixelated for a fraction of a second until it interlaces (if im using the word right). Sometimes it even starts to do it in pulsating manner to images that are static. Most of the images are interlaced PNGs exported from Illustrator file. I've noticed that on Safari, it does not have this problem. To be fair, on Safari website runs much smoother. I myself am on a Windows 7, Google Chrome.

Could this be due to file size? Or is it a file format issue?

Check out the video to see what I mean

https://drive.google.com/file/d/0B0yy6pDzHBptZm5tbHdkb1JJU0U/view?usp=sharing


#2

It's probably a case when the antialiasing is turned off during Transforms. It can happen also when an image/icon is under an element that gets Transforms.

You can try a blinking fix custom code maybe. Apply it to the .class of your image or image parent element.

/* Blinking fix */
  .class {
        -webkit-backface-visibility: hidden;
        -webkit-font-smoothing: antialiased !important; 
        font-smoothing: antialiased !important;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);
                    }

Edit ".class" and put your own instead, obviously.


#3

Thanks for reaching out Vincent!

I tried the code, but it seems that as I save it and publish the site it just gets stuck in loading page (which I have in my website). Why is that?

Cheers!


#4

Hi @Mareks_Zevalds, can you post a screenshot, what it looks like ? Is the page getting stuck as you load the site in the designer ?


#5

I don't think this code can prevent the loading of any page (:

Can you paste the exact code you've been using here please? And where exactly did you put it?


#6

Oh, yes, should have asked that - do it put in head or footer? I myself have no understanding of these concepts smiley


#7

In the head, and wrapped in <style> tag. So paste exactly the following:

<style>
/* Blinking fix */
  .class {
        -webkit-backface-visibility: hidden;
        -webkit-font-smoothing: antialiased !important; 
        font-smoothing: antialiased !important;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);
                    }
</style>

#8

Thanks! The code was executed, but it caused the opposite effect to some images (even more pixelated before actual animation is triggered) and no effect to other. frowning


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.