Jump to content


Android Z-Index Gaps in Webkit

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys, I'm building some test shapes in 3d, and they're working great so far. I can add, insert new planes , keep them as svg and it's going great... BUT the ads we make here go into a tablet in a WebKit/Webview enviroment.

When they do on IOS it looks perfect


On Android No matter the size the planes shift
Android 1

Android 2


Both different models, and massive screen size differences



I tried to figure out how to prevent this from happening, all my values are based off start values which are x y z values so i'm not using hard numbers i dont think... I tried to debug it as best i could and android just doesn't play ball.

It wont return offsetWidth, device width returns random numbers which aren't realistic to the stage, device width returns 0, viewport width returns 0... But i dont know if any of them are the reason why this is happening.
From what I see the top and bottom planes are perfect, but the side planes are all shifting.. Do you have any idea why?

Also off topic but again the codepen made my box different and skewed it.. looks skewed.

When it looks like what the above ios screenshot looked like on my desktop(and thats the way it should).

But yeah I'm mainly really concerned about those gaps.

Any tips?


See the Pen EyPeBV by LuckyDe (@LuckyDe) on CodePen

Link to comment
Share on other sites

Hello Luckyde,


What is the Android version and webkit version. Since different Android versions and Webkit builds will render differently, so providing some more info can help us better help you?


I am seeing the gaps intermittently, when rotated for the sides only, also in latest Firefox 47.


In order to animate a cube correctly in perspective. Your going to need to give your faces a defined width and height. Your only giving a width and height for the main parent cube container.


Also keep in mind that the default display property for the <svg> element is display:inline, so you need to give your <svg> elements a CSS display of block, so it can take up the full space within its parent element. And make sure you are zero-ing out padding and margin for all your cube elements, including your <svg> elements. This way you makes sure no the browser defined and user defind style-sheets are not inheriting any other values that could be causing the gap.


You also want to make sure that you have your absolutely positioned elements have a parent element that they are relative to. Nesting multiple elements with position absolute can cause issues cross browser which you are seeing now in Google webkit. So as a rule of thumb, when using position absolute, you must use position relative on a parent so your elements will have an anchor so to speak. Which will make your absolutely positioned elements positioned relative to their parent. This is very important for making your cube cross browser and render the same. And will help with proper z-index and the stacking context of your elements!


Here are some examples of a 3D cube using GSAP to give you some ideas:


Animate full cross browser 3D cube (even IE11) using transformPerspective instead of perspective:

See the Pen FEbzA by jonathan (@jonathan) on CodePen


Animate 3D cube using relative values for translateX:

See the Pen yYbBGb by jonathan (@jonathan) on CodePen


Just for fun , Animate a 3D pyramid / polyhedron (no IE yet):

See the Pen NxvvQW by jonathan (@jonathan) on CodePen


Animate 3D cube using relative values for rotation:

See the Pen yYvJoW by jonathan (@jonathan) on CodePen


Animate 3D cube relative values for rotateY:

See the Pen wMZrrP by jonathan (@jonathan) on CodePen


Animate 3D Cube menu (no IE yet):

See the Pen rOgVEd by jonathan (@jonathan) on CodePen


Hopefully you get some ideas! :)

  • Like 4
Link to comment
Share on other sites

Hey Jonathan, thanks for all the ideas, I'll apply some of this and yeah it's bizzare because it's not android's built in browser that's the issue it works fine. It's the app we're using's webgear that is causing it. After testing more and more things i found that doing this function

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    if (is_touch_device()) {
        scale = w / parseInt(target.style.width);
    } else {
        scale = 1;

Returns me different numbers and accurately on the big models scale goes up to 1.3, smaller 0.8, ios 1 exactly so on android the entire stage gets scaled up and down. Now that I have this scale value as a variable if i apply scale somehow to the gsap stage it would refrect accurately across devices. Do you have any ideas on that?


Here's a visual

I changed the base values by multiplying the Z values twice by the scale 

   start = {
                x: 0,
                y: 0,
                z: 50*scale,
                xW: 200,
                yW: 100,
And here's what i got
small android
big android
so its definetly making a difference i just need to figure out where to plug in the scale
Link to comment
Share on other sites

If you want you can private message me or post the link here? ..  and i can view your cube on my Android phone that uses the latest build. :)

Link to comment
Share on other sites

Sure Jonathan, but again your phone will see it fine, i dont think you have the app we use. The app is webview based, it's what powers up LaPresse and The Star Touch and it only appears there. So thats the dificult part, i need to keep re-sending the html and js files into the app to test over and over. This issue wont really happen on the browser only in the app because the entire stage gets scaled depending on the device model because thats how they've designed the backend. 


So I've gotta work around that entire scaling thing that the app applies after the files are sent. It almost never causes problems, it does scaling well. The only time it has so far is it can't figure out where page x and page y is on touch events because it thinks its somewhere else because of the scale(which i solved with the above script) and now this issue...


So i guess the main question is how does GSAP behave once the entire container (document.documentElement.clientWidth and window.innerWidth ) is being scaled and what values should I add the scale amount to to off balance it.


Sorry for the headache hahah

Edit: New code pen using your suggestions 

See the Pen KMVrdM by LuckyDe (@LuckyDe) on CodePen

Still has the scaling issue in webview sadly

Link to comment
Share on other sites

is that scaling happening by CSS transforms or how that web view is zoom scaling via the viewport?


And if it is the scale zoom viewport, have a you tried adding a meta viewport tag in your html head to make sure initial-scale is set to 1?

Link to comment
Share on other sites

Yes I've tried adding the meta tag, but it gets overwritten on publish. 

I think this person had an issue similar http://stackoverflow.com/questions/21460623/use-meta-viewport-width-in-android-webview

and I'm assuming 

 WebSettings settings = webView.getSettings();

gets fired off as soon as any ad goes into the ad container in the app .


I believe it's happening via view port but i don't have access to the back end to find out for sure.
I have in my research found that on IOS it sticks to 980x670px no matter the model, but on android the stage can go up to 1500 by 1025 and down to 400 by 273 depending on the model. 


Most things we build using hard values has no affect as it scales them up and down properly.  But client x/ page x doesn't for example get recognised and it returns the wrong value so i offset it by the scale amount to make it work.


And with this I'm assuming it's reading the values of some hard number and it stays on that value no matter the scale, so i need to find out what value i need to multiply by the scale I think... As yeah if you look in the screen shots if the android device is big the z Offset goes up, if it's small it goes down

Link to comment
Share on other sites

I figured out why it was doing this.

For anyone who's dealing with GSAP and Webview

The problem was when I .set the scaleX and scaleY value it doesn't respect the scale that the html file becomes after processing.

Changing it to width and height solved it! Width and height scaled properly where as scale did not.


@Jonathan is it possible for you to take a look at my new code and let me know how I can optimise it a bit more so I don't see tiny gaps on some devices?

See the Pen jrWQjG by LuckyDe (@LuckyDe) on CodePen

I set the margin to 0, padding to 0 in the css, set all the svgs to reserveAspectRatio="none",  and position: absolute

But I do still get small gaps on scaling so if you know what I've forgotten please let me know :)

Otherwise thanks for all the help, I really appreciate it!

Link to comment
Share on other sites

I just tested your new codepen link above on my Motorola Droid Turbo with the latest Android build and i see no gaps. But i do notice that the cube looks skewed, like the perspective is off. Kind of like its not a rectangle type of cube, but the where the faces are angled like a trapezoid instead of being rectangle?. Was that the cube geometry you were going for?

Link to comment
Share on other sites

I was going for a isometric perspective, i've done several revisions since then and i still see small gaps but i'm really close now.
Apart from the gaps it all works now, i just need to sort the small gaps


See the Pen NrNgmb by LuckyDe (@LuckyDe) on CodePen

The code has gotten a lot more busy but I had to do it so that it works on android in webview 



  var xN = Number(xBar.value),
          yN = Number(yBar.value),
          zN = Number(zBar.value),
          Sc = Number(defaultScale.value);
          TweenMax.set(baseRef[0], {rotationX:(xN*(Sc-1)/2 +xN) ,rotationY:(yN*(Sc-1)/2 +yN),rotationZ:  zN
I had to offset rotation values with the scale value so that it lands perfectly on the right angle on launch on android in webview for the app(Note works fine outside of webview, that's something i dont expect someone here to know, our app is built strangely).
But yeah if could give me tips on the tiny red gaps that would be amazing
Screenshot (using chrome 50.0.2661 on desktop)
You can use the scroll wheel to zoom into it and drag the stage to rotate it
Link to comment
Share on other sites

I'm still looking into the gaps, thanks for the image. I have also noticed these lines where the SVG meets each other in other SVG transformed elements. I only see it in Chrome though with SVG's that touch each other. Firefox doesn't render the isometric perspective at all, but i do see the line gaps in Firefox on the very bottom base of the faces .


Usually i have seen that on SVG's using sub-pixel values instead of whole numbers. But i see that you are using whole numbers so its something else.


You could also try to give your SVG paths the same stroke-color as your fill for all SVG paths. Also make sure to give your stroke-width  a value of 1. and see if that helps.


But otherwise i believe that webkit has a bug out for the gap between SVG elements. Try to remove the SVG and just have your background-color on the DIV tags instead. Try it with the SVG element out of the equation, with only div tags.



Link to comment
Share on other sites

Updated now using background colours. Still has gaps but at this point i'm just happy it works
(on desktop you can use the scroll wheel to zoom instead)
Hopefully i'll figure out what is causing these lines at the end of objects the more i work on this.



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.