Does not render in Chrome

[harrywesterman]

Thanks, nice idea, and it works great on my Android phone. Not on Chrome or the new Edge on Windows. (Works on the old Edge).

[lukevink]

Hey cheers! Will look into these browsers and why, very odd.

[bgrr74]

Hello Luke,

I was able to reproduce the rendering errror in Chrome.
But only when zoom in the browser is 100%. If i change the zoom in the brower to 90% or 80% the card is working perfect.

Chrome version : 80.0.3987.149 ( currently latest version)
Hassio : V0.107.7 (currently latest version)

[Bart-van-Ingen]

the same is occurring on Firefox!
firefox 75.0
Home Assistant 0.108.3

[lukevink]

If you go right click "Inspect" are you able to share any issues that pop up in the console? (Not having any of these issues on the same browser)

[rob196]

Getting same issue, no errors in Console, but noticed the height is set to 0
<canvas id="rainchart" height="0" class="chartjs-render-monitor" width="406" style="display: block; width: 406px; height: 0px;"></canvas>

Manually changing to 100% I can then see the chart

NOTE: I am using lovelace-card-tools - not sure if this has any impact?

[dannymertens]

Same problem for me Safari works, iOS works, Chrome, Firefox on the desktop does not

Is this helpful?

raintext:1 Failed to load resource: net::ERR_NETWORK_CHANGED
DevTools failed to parse SourceMap: chrome-extension://hnmpcagpplmpfojmgmnngilcnanddlhb/browser-polyfill.min.js.map
DevTools failed to parse SourceMap: https://redacted.ui.nabu.casa/static/28e91ba70cd70fa9adf3f2e3e3b87631b5667ecf/dist/serviceWorker.js.map
DevTools failed to parse SourceMap: https://redacted.ui.nabu.casa/hacsfiles/button-text-card/index.m.js.map
Node cannot be found in the current page.

[syphernl]

This quick-fix seems to work for now:

  - type: 'custom:buien-rain-forecast'
    long: 4.8945
    lat: 52.3667
    lineColor: 'rgba(89, 160, 238, 1)'
    fillColor: 'rgba(89, 160, 238, 0.2)'
    update_interval: 10
    icon: 'mdi:weather-rainy'
    style: |
      .chartjs-render-monitor {
        height: 200px;
      }