Posição incorreta no android

[taviroquai]

Boa noite,

Venho pedir-vos a vossa ajuda com um problema que me deparei.

Isto é para colocar um donut com o EasyPieChart. A ideia é que a legenda fique sobreposta no gráfico.

No Chrome e no Firefox no windows aparece tudo correto. No Chrome no Android não. No chrome no Android, a legenda aparece sempre abaixo do gráfico.

Alguma ideia?

Segue o código:

<div style="position: relative; text-align: center; width: 188px; height: 188px;">
    <div id="chart">
        <canvas></canvas>
    </div>
    <div id="chart-legend">
        <span>0</span>%
    </div>
</div>

O css...

#chart {
  position: absolute;
  width: 188px;
  height: 188px;
  text-align: center;
  font-size: 12px;
}


#chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#chart-legend {
  position: absolute;
  top: 80px;
  left: 70px;
  z-index: 1;
}

Edited August 25, 2016 at 01:43 AM by taviroquai

[taviroquai]

Lá consegui colocar o chart e a legenda como petendia. Usei uma solução que não é suportada por IE8.

#chart {
  position: absolute;
  width: 188px;
  height: 188px;
  left: 50%;
  transform: translate(-50%, 0);
}

#chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#chart-legend {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 12px;
  z-index: 1;
}