android - propiedad - div rota pero el cuadro de recorte de div no

máscara texto css

Question

Violín relacionado

Tratando de construir este pequeño y ordenado medidor sin una biblioteca JS (como Raphael), se me ocurrió una pregunta que puedes encontrar aquí . Después de mucha frustración, pensé en otro diseño con el que hacer funcionar este medidor (que funcionó alrededor de un error de Chrome conocido por separado), que se puede ver en el violín anterior.

<div id="clipper">
    <div id="round">
    </div>
    <div id="clipper2">
        <div id="meter"></div>
    </div>
</div>

Sin embargo, esto creó un NUEVO defecto de navegador de Android (4.0.4 al menos). El elemento div cuadro de recorte gira como se esperaba. Sin embargo, el cuadro de recorte calculado real tiene límites horizontales y verticales, que abarcan la forma visible. Esencialmente, significa que los elementos secundarios siempre se recortan en forma cuadrada, en lugar de a lo largo de los bordes girados del elemento.

El medidor en sí tiene algunos requisitos inusuales, de lo contrario, esto sería más fácil de hacer: no es un medio círculo completo, sino un corte en la parte superior de un arco. También debe rotar alrededor de un punto en el centro inferior de esta rebanada, no lo que sería el centro del círculo.

Answer 1

Android realmente, realmente no le gusta la transform: translateZ(0); . En absoluto. En cualquier sitio. Si esta propiedad está en cualquier elemento de ese árbol, todo falla.

Fiddle actualizado que funciona: http://jsfiddle.net/FB6rf/15/

Si alguien tiene una explicación para este comportamiento, soy todo oídos. Porque de lo contrario * poof *, estoy fuera 100 recompensa. Tal vez si algunos usuarios me muestran algo de amor, no será una gran pérdida.

Answer 2

Pruebe con SVG: http://jsfiddle.net/8fsS2/4/

HTML:

<svg id="generate" version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="500px" height="120px" viewBox="0 0 200 120" preserveAspectRatio="none">
        <g id="chart"></g>
</svg>

Javascript:

function deg2rad(deg) {
        return deg * Math.PI / 180;
    }

    function annularSector(centerX, centerY, startAngle, endAngle, innerRadius, outerRadius) {
        startAngle = deg2rad(startAngle + 180);
        endAngle = deg2rad(endAngle + 180);

        var p = [
                [centerX + innerRadius * Math.cos(startAngle),  centerY + innerRadius * Math.sin(startAngle)]
            , [centerX + outerRadius * Math.cos(startAngle),    centerY + outerRadius * Math.sin(startAngle)]
            , [centerX + outerRadius * Math.cos(endAngle),      centerY + outerRadius * Math.sin(endAngle)]
            , [centerX + innerRadius * Math.cos(endAngle),      centerY + innerRadius * Math.sin(endAngle)]
            ];

        var angleDiff = endAngle - startAngle
            , largeArc = (angleDiff % (Math.PI * 2)) > Math.PI ? 1 : 0;

        var commands = [];

        commands.push("M" + p[0].join());
        commands.push("L" + p[1].join());
        commands.push("A" + [outerRadius, outerRadius].join() + " 0 " + largeArc + " 1 " + p[2].join());
        commands.push("L" + p[3].join());
        commands.push("A" + [innerRadius, innerRadius].join() + " 0 " + largeArc + " 0 " + p[0].join());
        commands.push("z");

        return commands.join(" ");
    }

    function create(type, attr, parent) {
        var element = document.createElementNS("http://www.w3.org/2000/svg", type);
        if (attr) for (var name in attr) element.setAttribute(name, attr[name]);
        if (parent) parent.appendChild(element);
        return element;
    }
    var svg = document.querySelector("svg#generate g#chart");
    create("path", {
        fill: "#FF0000",
        d: annularSector(80, 80, 0, 180, 0, 80)
    }, svg);


    create("path", {
        fill: "#00FF00",
        d: annularSector(80, 80, 0, 65, 0, 80)
    }, svg);

ajusta el viewBox para escalar.