Jump to content


Flickering border on centered div

Recommended Posts

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>
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!
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.