Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flysi3000

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>
</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 post
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 post
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 post
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 post
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.

×