Ich habe Code, der bis vor kurzem an allen Browsern gearbeitet hat, die CSS-Transformationen unterstützen. Es hat im neuesten Chrome (37) eingebrochen. Ich habe das Problem gefunden. Die Transformation aus dem berechneten Stil eines Elements wird von anderen Elementen nicht akzeptiert.
HTML
%Vor%CSS
%Vor%JavaScript
%Vor%Hier ist eine Geige: Ссылка
Das Problem ist, dass das zweite (blaue) Element sich nicht genauso dreht wie das erste (rote) Element, obwohl ich es im Javascript erklärt habe.
Das sieht für mich wie ein Fehler aus. Ist es?
BEARBEITEN: Mein tatsächlicher Code funktionierte in jedem Browser, außer dem neuesten Chrome, aber es scheint, dass mein Beispielcode in allen Browsern bricht. Ich möchte immer noch verstehen, warum das obige Problem auftritt.
BEARBEITEN 2: Erneut nur Chrome 37 einbinden. Meine Vermutung ist, dass es die wissenschaftliche Notation nicht mag; aber warum sollte der berechnete Stil es haben?
Dies ist ein ziemlich häufiges Problem, ähnliche Fehler treten auch bei älteren Versionen von Chrome und anderen Anbietern auf.
Die übliche Lösung ist, wie Hashem erwähnt teilweise, um entweder die Rotation in etwas wie 89.9deg zu ändern oder GPU Rendering zu erzwingen, indem man zusätzlich zur Rotation etwas wie translateZ(1px) macht. Demo . In der Zukunft können wir dies wahrscheinlich auch mit Hilfe der will-change -Eigenschaft
Dies liegt daran, dass Browser Probleme beim Rendern bestimmter Dinge haben und Renderelemente, die genau um 90 Grad gedreht sind, eines dieser Dinge sind. Manchmal brauchen sie ein wenig Hilfe:)
Tags und Links javascript google-chrome css3 transform