Cross browser test - 3d cubes

Design help General
1

Hi there,

Im a begginer, exploring the use of cubes for website animations.
made a short looping animation with cubes to test the possibilities, performance/design wise.
when testing diffrent (updated) browsers I realised theres a big problem :sweat_smile:

Chrome (mobile & desktop) - all is good.
Firefox (mobile & desktop) - horrific
Edge mobile is even smoother then chrome but the desktop version is no good.

com-optimize
com-optimize700×250 2.2 MB

LTR> chrome - Edge - Firefox (desktop browsers)

Tried looking in “can i use” but i guess i dont know what to look for.
searching for Transforms (2d+3d) there is full support for the browsers.
can i use

In order to continue i need to understand and consider those factors,
when and if, to use different cube elements.
any insight will be much appreciated.

(The cube animation is triggerd by MOUSE HOVER)
my read only: read only link
and the publish: publish

2

Incase someone else encounters this problem there is a simple solution…
In order for the Layout to display a 3d cubes in all browsers you must give a transform value
for Each nested DIV. in chrome and safari theres no need.
I added a 0.0001 value of transform to rotate- y axis. works like a charm.

BTW
didnt know one can work with webflow on firefox.
thats how i figured it out. if you have a problem with a model displaying
on firefox, just build it in firefox.

1 Like