Transitions causing "flashing" in text elements further down the page

Design help General
1

Safari only issue.

I have tried a myriad of work-arounds. cannot crack this.
At first, i thought it involved opacity changes in my transitions. but it seems to happen no matter what i try.

my read only is here:
https://preview.webflow.com/preview/scottbarbey709560115024059?preview=caeff9bd110fc0a6378a6954e554593d

right on my homepage I have 2 examples. (top 2 mods. hover states on large images)

first mod has s a scale up/scale down transition.
second mod has the same with additional opacity change.

BOTH are effecting opacity of other type elements lower on the page.
This is driving me crazy and I cannot find a solution.

I would like to have some transitions on my site. Help please.

SB

2

I wanted to test and adice you either to:

  1. give the flashing elements the highest z-index of the page so HTML don’t have to redraw them during transitions

  2. try the CSS code below on those elements, to force antialisasing at all times and other things (that I dont fully understand, it’s code I grabbed and arranged over time for this specific issue)

    /* Safari Blinking Elements During Transitions fix */
    .yourElementClass {
    -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);
    }

… but I actually can’t see your bug in Safari on homepage first 2 sections either in the designer preview or on http://scottbarbey709560115024059.webflow.io

1 Like
3

hi @vincent,
appreciate the help…

two things -

  1. I’m a dope and I have no idea what Z index is or how to effect it. :smile:
  2. I’ve never applied a code snippet. Is it done globally, or asset-by-asset…?

Also - I’ve seen this problem all over on several Webflow sites.
Even on sites they are featuring in their Articles… (Overton Graphics, This is Craig)

Saw someone else commenting on this issue, they suggested this custom code:

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
4

Hi again,

For z-index, select the element in question (like the container of all the elements who are blinking), click on position:relative and add a value like 10 in the z-index box. if the box doesn’t appear, click again on the Relative button (even if it’s already clicked).

Z-index is the order of the elements on the Z axis (depth). So an element with 10 will be on top of an element with 9.

Try Zindex first, if it doesn’t work, open your page settings and in the custom code section:

http://vincent.polenordstudio.fr/snap/ksa8p.jpg

…paste eactly this code:

<style>
/* Safari Blinking Elements During Transitions fix */
.yourElementClass {
-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>

But replace "yourElementClass " by the name you gave to your element:

http://vincent.polenordstudio.fr/snap/054u7.jpg

5

If you want to apply the property to several individual elements, you can add all the class namess like this:

.yourElementClass1, .yourelementclass2, .your3 {
6

@vincent
the z index did the trick.
cannot fully express my appreciation.
thank you, thank you, thank you.

  • Scott
1 Like
7

That’s great Scott, thank you for the feedback and kind words, glad I could help.

So the reason here was what I suspected to begin with. Safari can’t seems to keep the anti-alisasing of text when there’s CSS transformations on top of it. Giving thoses texts the highest z-index place them on top of the vertical hierarchy (z axis) so Safari doesnt feel the need to redraw them for each frame.

Have a nice day.

1 Like
8

@Vincent -
spoke a bit too soon. :frowning:
works wonderfully on home page.

cannot get it to work on the three or four other pages I want to use it on.
May be because on home the transition elements are in one section and the non-transition elements (type etc) are in a separate section.

on my Digital page - for example - the transition graphic is in a column, alongside a column w/o transition. And the type refuses to stop flashing even when z index is up at 50.

May resort to plan B - code snippet.
Reeeeeeeaaaallllllyyyyy don’t want to. may have too.

still greatly appreciated the help.
No one else could explain or help at all until you popped up.

SB

9

@vincent - code snippet seems to be working. (with a bunch of minor adjusting).

Again, thanks dude!

10

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