Jump to content
Search Community

Perspective - Safari Issues

themepunch test
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

Hi,

 

an issue which maybe has been discussed already, however could not find a solution yet.  In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode.  The Results how it is rendered in Safari and Chrome are different. 

 

example.jpg.f88ac71aa822824e006eb230e3cefda0.jpg

 

Wrapping the layer_wrap to set perspective on that container is not a solution for me due the mix-blend-mode needs. rotating the layer_wrapper also not due some other restrictions i have in the project.  Would be interested on some nice ideas for this.  Hope you guys have an idea ? 

 

Thanks a lot,

 

Krisztian from ThemePunch

See the Pen VdbMMo by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites

Yeah, looks like a rendering bug in Safari.  Have you tried replicating the effect with CSS only (no GSAP)?I'd start there and if it doesn't work maybe try submitting a bug to the safari team.

 

 

Someone else around here may have some tips for you, but I'd suggest a forum more focused on general web dev issues like stackoverflow.

 

 

  • Like 2
Link to comment
Share on other sites

Thanks Carl for the quick answer ! Really appreciate it.

 

Yes, it is also reproducible without GS: 

See the Pen Pajqrb by themepunch (@themepunch) on CodePen

 

 I was hoping that one of the Rocket Scientist at GreenSock :) has some good idea for this.   Indeed i reported the issue on different Forums, hoping on some easy workaround. Other way i will need to go extra rounds to build the structures differently. 

 

Happy Tweening and thanks again ! 

 

Krisztian from ThemePunch

Link to comment
Share on other sites

Hello @themepunch

 

This is happening since the layer is rotating causing the rotated bg to intersect the z-axis of it. You will have to move the layer so its z-axis is moved forward so the intersection doesnt overlap the layer text. But this is a Safari z-axis bug that i have seen many times when you nest various elements with rotation. So you will have to account for it, but then you will have to change the translate X and Y to accommodate the z-axis.

 

A better way is to just change your markup so its standardized with how absolute and relative positioning work in the browser. You have various absolutely positioned nested elements with some having nested rotation which can cause this type of rendering in Safari.

 

I know I have said this many times in this forum, but you shouldn't be setting position absolute without having a parent set to position relative, so the browser can stack elements appropriately.

 

So what i did in your above codepen's CSS:

  1. on bg, i changed z to z-index so its proper syntax
  2. on layer, I changed position: absolute to position: relative
  3. on layer_wrap, i changed z to z-index so its proper syntax
  4. on layer, I changed position: relative to position: absolute
  5. on layer, i added z-index so it stacks correctly
  6. on layer, I added top: 0px since its always best to define your offsets and not trust the browser user defined style sheet which is usually set to auto
  7. on layer, i added white-space: nowrap so the text doesnt wrap

If it was me I would also add a parent element with position relative to world element so world is absolutely positioned relative to its parent to prevent issues like you were seeing above when nesting elements.

 

Try this modified fork of your codepen.  Tested on iPad Pro with latest Safari and I didnt see the intersection of rotated elements now.

 

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

 

Happy Tweening!

 

Resources:

CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  • Like 4
Link to comment
Share on other sites

Hi,

 

Thank you for your answer Jonathan. I am sorry to tell, but the result of your changes are  just exactly the same like my one. They break in Safari on a Mac OsX (Tested on 3 different Devices).

 

It works on Mobile Devices which is great for the first  but not in Safari on Mac OSX.  Also  it works only due the fact that the parent element gets relativ position.  if i change the relative position to absolute on the wrapping layer, it just brakes as well on mobile devices which shows that somehow the stacking container structure is handled there differently. 

 

Also, using relative position with top/left definitions on the  layer_wrap (see my last example) behave differently on Safari Mac and on Mobile devices and in Google Chrome.  

 

See the Pen gKxpzY by themepunch (@themepunch) on CodePen

 

I was hope that some kind of preserve-3d transformstyle would force a new stacking container on the layer wrap. Moving things on the "z axis" would change also the distance to the viewer, getting the feeling that the layer is somehow scaled/zoomed so it is definetely not a solution for me.  

 

Until Chrome creates a new "rendering area" for the layer_wrap and using the z-index of those containers to decide which elements rendered over which one,  seems that Safari somehow merge those different "stacking" areas and shows us a combination of those.  I understand well why the layer is cut, and half is not visible, but i want to split those worlds, rendering them independent but still profit of the mix-blend mode and further css futures. 

 

Sorry to being a pain and for disturb you guys with something which is not GS based at all.

If you wish, please just close the blog, since it is a Safari Issue and not a GS issue. 

 

With the deepest thank you and have a great day !

 

Krisztian

 

 

 

 

  • Like 1
Link to comment
Share on other sites

34 minutes ago, themepunch said:

Sorry to being a pain and for disturb you guys with something which is not GS based at all.

If you wish, please just close the blog, since it is a Safari Issue and not a GS issue.  

 

Don't worry about it, it is still indirectly related to the forum. @Jonathan is CSS wizard, he loves taking on such questions. I am sure he would be able to offer the solution as long as it isn't a bug.

  • Like 3
Link to comment
Share on other sites

Glad to help :D

 

Sorry I dont have access to Safari on Mac OsX, so i was unable to debug that to fix.

 

For Mac OsX Safari, You could still increase your z (translateZ) value so it pushes the layer forward and out of the intersection of the rotated image. And then only add if Mac OsX. I believe the CSS rule for targeting only Safari Mac OsX is the following but i don't have a Mac OsX to test the following on:

 

_::-webkit-full-page-media, 
_:future, 
:root {
     /* Safari 7.1 - 8.0 (Safari 7.1+) */
     /* add extra transform: translateZ() value here for Mac OsX Safari */
}

 

Happy Tweening! :)

 

 

  • Like 3
Link to comment
Share on other sites

Thank you Jonathan again for your time ! Indeed i used some dynamic switch which will auto add z transform to elements which would may interference iwht other objects.  It is a pity that thing need to be browser based limited.  Customers of our products can create amazing things with a WYSIWYG Editor, and at the end we need to limit their Creativity by browser issues and bugs.  

 

Still, i am more than thankful for your ideas and inputs  here !  Awesome Service as always  and awesome Tool ! 

 

Cheers and happy Tweening to you al l! 

  • Like 2
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.
×
×
  • Create New...