The skew(90deg) Method

Question

Why, when the “skew” method tilts the <div> element along the x axis or the y axis by 90 or 270 degrees, everything disappears?

Example:
https://code.sololearn.com/Wmn12u8TO24p/?ref=app

Answer 1

Thanks dρlυѕρlυѕ for tagging.

1. On my device:
https://www.sololearn.com/post/73964/?ref=app
https://www.sololearn.com/post/73965/?ref=app

2. My browser:
Android Browser 4.0 (like Chrome 72.0.3626.105) on Android 8.1.0

3. What skew() does:
skew() function is like cross multiplication of the transformation matrices on the coordinate vector.
X' = X + Y * sx
Y' = Y + X * sy
where sx = tan(x) and sy = tan(y)
Reference: https://stackoverflow.com/questions/28672451/difference-between-skew-and-skewx-skewy

Note that tan(90deg) mathematically is undefined. However JavaScript handles it as a very large number. 16331239353195370
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan

4. Different way of handling of tan(90deg)
"CSS fallback behaviour
CSS is arguably better at fallbacks than HTML. If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error."
Reference:
(word limit)

Answer 2

dρlυѕρlυѕ I hope I have not given wrong answer 😅

https://code.sololearn.com/Wp3t5jIsRd8x/?ref=app

I tested a little bit. Below is my finding:

1. The JavaScript calculation result of tan(90deg) is outside the range of safe integer.

2. Setting width/height with such large value is, counter intuitively, ok.

3. The problem is only with skew(). It ruins only the same div element. Part One and Part Two looks unaffected on my device.

Answer 3

(continue)
Reference:
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

"... such a mistake slips through to production code, but at least it means the whole site doesn't come crashing down because of one error,... "

Some browser such as Safari of iOS completely ignores tan(90deg), that's why the page doesn't crash.

Some browser such as Android browsers think that they can handle the large element size, resulting everything looks gone (while actually it's not gone, it's just too large, imagine an ant seeing an elephant)

Answer 4

It’s because the element has no depth, so when you look at it, you don’t see anything because it only 2D.

Answer 5

The whole sebpage doesn’t disappear for me, only the box disappears.

Answer 6

I generally agree with Rowsej . It may also be problem with browser support : https://www.caniuse.com/#feat=transforms2d

Maybe you should also check that out.

Please don't make duplicate posts. ✌️

Answer 7

I use iOS.

Answer 8

Well, the discussion is ongoing...
Let's see, maybe Calviղ or Gordon know something about that.

Answer 9

dρlυѕρlυѕ
If do not make a duplicate question, then how can bring to the discussion?

Answer 10

I have Android 5.1.1

Answer 11

Gordon Wow! Thanks for finding out!

Answer 12

Rowsej
Do you watch from PC?

Answer 13

Gordon I tagged the right person, you are absolutely amazing! 💯💯💯

Answer 14

Rowsej
It is not only about the element with "skew", but also about the entire html page.
See the example given.