Details
-
Bug
-
Resolution: Fixed
-
Normal
-
3.0.5
-
Security Level: Jimmy
-
None
Description
Steps to Reproduce
the following case reproduces the error:
<div width="200px" height="200px" style="border: 1px solid red"> <hlayout vflex="1" hflex="1" style="border: 3px solid blue"> <gmaps vflex="1" hflex="1" /> </hlayout> </div>
Current Result
JS error:
zk.wpd:350 Uncaught TypeError: Cannot read property 'firstChild' of undefined at b.sync (zk.wpd:350) at b._tryBind (gmaps.wpd:3) at gmaps.wpd:3 at Object.b.callback (gmaps.wpd:2) at a (gmaps.wpd:2) at gmaps.wpd:2
Expected Result
no error
Debug Info
The problem doesn't happen with vlayout or div around the gmaps.
However the error can be reproduced also by applying an "inline-block" style to a div.
<div width="200px" height="200px" > <div vflex="1" hflex="1" style="border: 3px solid blue"> <div vflex="1" hflex="1" style="display: inline-block;"> <gmaps vflex="1" hflex="1" /> </div> </div> </div>
Root Cause
the mask is rendered at a moment where then surrounding div is not yet sized, so it is potentially invisible, or the mask is rendered at an incorrect size not showing the loading message at all.
It should be considered to initialize the loading mask only after the size calculations are finished.
Workaround
adding a "min-width: 1px" to the gmaps component prevents this issue
<gmaps vflex="1" hflex="1" style="min-width: 1px"/>