Flickering border on centered div

[flysi3000 49 Likes (Newbie)]

Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either).

 

I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox.

 

The structure of the object is as follows:

<div class="banner">
    <div class="border"></div>
</div>

The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized.

 

I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!

[GreenSock 8,117 Likes (Superhero)]

It's kinda tough to troubleshoot without a codepen to mess with, but it certainly looks like a Safari rendering bug. Have you tried setting CSSPlugin.defaultForce3D = false just to prevent things from getting GPU-accelerated? Obviously that kinda sucks because you'd miss out on the speed benefits, but I wonder if Safari would behave better if it wasn't involving the GPU. Let us know if that helps anything.

[OSUblake 9,990 Likes (Superhero)]

I've used this script to center canvas elements. It's commented out now, but at the bottom you can see there was a fix for Safari.

https://github.com/kittykatattack/scaleToWindow/blob/a5b6996d87d14a6cff0443b102ac814dc1e2a48a/scaleToWindow.js

[Jonathan 5,176 Likes (Superhero)]

hello flysi3000,

 

I checked on iPad Air - iOS latest but did not see this issue.

 

But this looks like an issue with z-index stacking order issue. You should also add a z-index to your other elements that use position: absolute. The first time i looked you had no z-index, but looks like you added a z-index on the border div.

 

Also you can try add the following on the element you are transforming. That helps with known Safari bugs that cause flickering.

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
transform-style: preserve-3d;

If that doesnt help you might have to bring the border div on its own rendering layer so it can go above your transformed element.

 

[flysi3000 49 Likes (Newbie)]

Thanks for all the helpful suggestions, guys. I ended up using @jonathan's suggestion of putting the border on its own layer outside of the banner div, and everything's fine.