Google Chrome is rendering my CSS code badly and I do not know if the problem is to use VW or Flexbox or something else

Question

Google Chrome is rendering my CSS code badly and I do not know if the problem is to use VW or Flexbox or something else

I'm having problems with (I think) Chrome, when it renders certain elements.

I'm using almost nothing from js, it actually just creates the global variables and the prevent.default for anchors and rest, I use pure css.

I'm just starting to layout, but when I scroll the elements that are supposed to be positioned in fixed, disappear from view, or present as render errors, I don't know what can be, try z-index, but nothing, I start to believe that it is by using vw or flexbox measures, but I think it may be something else, some Erro mio, well silly.

Another thing, in internet explorer seems to work perfectly, this is the pen, to further review the code: http://codepen.io/g3kdigital/pen/QNMdBW

I don't really know what it can be, I still think I can fix it on my own, but if someone else can give me a hand, I would really appreciate it. Be using chrome's latest vr, the 49.

2

Author: A. Cedano, 2016-03-30

Source

2 answers

score 1 · Answer 1

To get out of ignorance about the subject, I have researched a little, managing to find out from official sources the answer to this behavior.

According to the draft CSS transforms from the W3C, Section perspective-property the property transform "sets" a block container similar to position: relative:

Using this property with any value other than none establishes a stacking context. It also sets a block container( something similar to position: relative), to same as property transform.

In the same document, section transform-rendering, it states the following:

First paragraph:

Specify a value other than none for the property transform sets a new local coordinate system on the element to which it is applied.

Fifth paragraph:

Any value other than none results in the creation of a stacking context and a containment block. The object acts as a container block for fixed descendants (position-fixex).

The sentence above makes clear the why of this behavior: if you have a parent element with some property like transform, perspective included in the CSS transforms specification - and one or more fixed children, then the root element will no longer be the viewport, if not the parent , thus disabling the natural behavior of position: fixed.

Sources

score 0 · Answer 2

Have you tried clearing the cache? It happens to me that in Chrome still doing ctrl + F5 when I model the css seems to get stuck, in firefox I'm fine... I downloaded a plugin from the store called

Clear Cache

And I have it assigned to ctrl + R

At the moment I have not had problems again.