blog.hospodarets.com - layout is messed up

[simevidas]

URL: https://blog.hospodarets.com/demos/no-preprocessor-css-3d-cube/
Browser / Version: Firefox 52.0
Operating System: Windows 10
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: Site URL

Expected Behavior:
You should see a CSS 3D “scene” which responds to mouse cursor position and scroll wheel.

Actual Behavior:
You will see a flat, non-interactive scene.

You can see how the 3D effect works in this GIF. Firefox does not seem to support var() inside calc(). When I use var() directly inside the 3D transform functions, it works in Firefox, but when there is a calc() in between, Firefox doesn’t recognize it.

From webcompat.com with ❤️

[shospodarets]

It works in both Chrome (54+) and Safari (10.0.1+).

[wisniewskit]

Thanks for the report! I agree with the assessment that it's a Firefox issue, so I've filed a bug report. I'll try to keep this issue updated if that bug changes.

[simevidas]

@malyw Could you update the demo on that page, so that it uses px/deg values instead of calc()? Until the Firefox bug is fixed, var inside calc inside transform functions (i.e. 3 levels deep) just can’t be used.

[shospodarets]

Hey @simevidas , @wisniewskit
I'll better leave as it is, as part of my presentation http://blog.gospodarets.com/you-might-not-need-a-css-preprocessor
there are many other demos, using which I also explain for the auditory existing issues.

E.g. https://blog.hospodarets.com/you-might-not-need-a-css-preprocessor/demos/no-preprocessor-css-colors-from-custom-props/ (the demo where --r,--g and --b custom properties are assigned from sliders via JS and then background-color(s) are generated using them and the calc() function, with 4 options) :

1. When you open it in Safari, the second option doesn't work till you drag the slider
2. Chrome doesn’t like multiplying/dividing with noninteger numbers in calc() with CSS variables
3. Firefox doesn’t work with custom properties in calc() inside of rgba() at all

[simevidas]

@malyw Might be worth filing a bug for number 2 😅

[shospodarets]

@simevidas
I just checked again, and it appeared to be a bit in a different way:

1. Safari accepts non-integer numeric values in rgba(), which is not aligned with the spec
2. Chrome doesn't accept non-integer numeric values, which is actually according to the spec https://www.w3.org/TR/css3-color/#rgba-color , so it's ok
3. The second option doesn't work in FF, which is actually a bug

[simevidas]

@malyw That’s a spec snapshot from 2011 😉. Always use editor’s drafts; the values are full <number>s now: https://drafts.csswg.org/css-color/#rgb-functions.

[firefoxic]

In fact, the problem is not that calc() is between transform functions and var(), but that firefox does not support the degrees inside calc(). Here is an example of how we can move deg from CSS (line 7) to JS (lines 15 and 16) and it all works even with translateZ(calc(var(--translateZ) * 1px))

[shospodarets]

@firefoxic thanks for pointing out. True, looks like a Firefox bug, cheers.

[firefoxic]

And calc() with var() inside the transform functions, even if it was a problem, it could be solved quite simply:

#world{
    --translateZ:0;
    --rotateX:65;
    --rotateY:0;
    --Zpx: calc(var(--translateZ) * 1px);
    --Xdeg: calc(var(--rotateX) * 1deg);
    --Ydeg: calc(var(--rotateY) * 1deg);

    transform-style:preserve-3d;
    transform:translateZ(var(--Zpx)) rotateX(var(--Xdeg)) rotateY(var(--Ydeg));
}

But this also does not work, because the problem is with the angular units ​​inside the calc().

[wisniewskit]

This now works using the new Stylo CSS engine, which just became enabled by default in the nightly Firefox builds and should hopefully make it into the stable builds by Firefox 57 or 58.