Flickering in z-Index

Hello fellow Hypers,

I have some flickering in my banner wenn ich animate some leaves and branches out. When I reduce the view scale in the browser to 80%, the flickering stops.

https://www.prodeers-lab.com/agencies/zgh_dt/clients/kiue/kiuem19014201/index.html

We are testing around how many layers we can show.

Can you provide a screen capture and let me know what browser/OS/versions you are testing on?

It’d also be useful to get a zip of the .hype document.

Hi @jonathan,

here you go. A live Link with the effect. At scale 110% I can force the visuell effect I get when I have more then 2 banners of the same animation in the browser window.

https://www.prodeers-lab.com/agencies/zgh_dt/clients/kiue/kiuem19014201/hh-dt-vorschau-hamburg-kopie.html

Browser: Chrome
Version: Version 75.0.3770.142 (Offizieller Build) (64-Bit)

OS: macOS Mojave
Version: 10.14.5

Files:
flickering_hype.zip (523.1 KB)

I did not experience flickering either in Safari (11.1) or Chrome (75.0.3770.142 (Official Build) (64-bit)) whether from the online example or the Hype (4.0.1) Preview.

Mac OS: 10.13.4
Display: 27" (2560 x 1440)

I also don’t see it. If you send a screen capture and let me know what elements are flickering I could perhaps advise more, but there’s not much to go on.

You can try toggling “Use WebKit graphics acceleration” and “Position with CSS left/top” and see if that makes any difference, but that would be a shot in the dark.

True true… I’ll try to see if I can reproduce and screen capture it.

Is it maybe a memory thing I have? :smiley:

Here is the screen capture on an unlisted youtube video.
Timestamp: 26.07.2019 11:19. The video is still rendering, so only a 360p version could be online.

1 Like

What graphics card/amount of video ram do you have? It definitely looks like it could be an issue with shuffling items to/from the graphics card due to your use of 3D transformations and skewing on a lot of elements.

I’d wonder if this happens when only showing one ad at a time (which would be using fewer resources). Also I would definitely try toggling “Use WebKit graphics acceleration” and “Position with CSS left/top” though it may not make as big of a difference since you are using 3D transformations on those elements.

These Banners will be shown once per refresh on different Websites. But there is a possibility that 3 banners with different sizes will be shown on one page. A good example is the moneymaking: https://www.speedtest.net/

I’ll post again today when I’ve done the shot in the dark test, @jonathan .

My MacBook Pro Specs:

I should clarify, I’m not suggesting that you do run one ad per page, but I’m curious if reducing the number of ads will see the problem go away - this would indicate it is a resource utilization issue instead of a more straight graphics issue.

Along those lines to narrow down the root cause, I’d be curious if you can reproduce on a clean user account after a restart where no other major applications/system processes are running.

I’d also be curious if this happens when you explicitly turn on the radeon graphics card (via the Energy System Pref Pane “Automatic graphics switching” box and unchecking it)?

Further, do you experience clickering on other browsers?

Interesting… when I preview this banner ad I get these violations…

They start once the banner is restarted with a timeline action.
On my 2014 Macbook Pro one of these ads get my fans spinning.

The line creating the Violation is:
timelineRun.animationCompletionTimeout = window.setTimeout(function() { timelineRunCompleteCallback(timelineRun); }, (timelineDuration(timelineRun) / timelineRun.playScale * 1000));

1 Like

What are these Violations and how do I see them Max? Thanks for an update.

Violations inform about best practice on performance optimization.
Seams like your banner in combination with Hype is just a bit much to handle at times (depends on the hardware I guess). My Macbook Pro is from 2014… love the old keyboard! :wink:

Here is a quick intro to violations:
https://umaar.com/dev-tips/192-console-violations/

Still doesn’t solve your flickering problem… have you tried not using symbols for the leafs?

Will give that a try. Box it in.

I’d agree with this assessment given the information so far. The general result of what triggers the violation would be a reduced framerate - basically a frame can’t get rendered fast enough. This could be the symptom of the same problem or a direct result of the problem. The flickering looks like bitmap memory is getting removed and then added back.

My recommendation would be to reduce the number of scales, skews, and 3D rotations if possible.