Update textbox fails in chrome

ktewes · January 14, 2021, 8:52am

Hi all. Just curious: You can dial a number on the phone keypad (kids are supposed to dial 112 - if so, a connection is established...). The numbers you dial are supposed to be displayed in the display. This works - in Safari and Firefox. In Chrome the following happens: Digits are only displayed, if you open the console bar, or if you change the size of the browser window in general. It´s a little bit like with Schrödingers cat - the very moment you open the box and have a close look...

Anyway - it works even well, if I initialize the textfield (init function) and put some value into it... Is there a kind of 'update screen' command that could help?

Thanks in advance, Kalle

Dial.zip (36.9 KB)

jonathan · January 14, 2021, 9:18am

It looks like a Chrome rendering bug - this should definitely work.

You are right about the initialization -- the problem stems from the display being empty (""). If you have the line in init() be: myDisplay.innerHTML = " "; it will work fine.

Other workarounds:

change the render mode by unchecking Use WebKit graphics acceleration in the Document Inspector, and it will work as well.
Fiddle with a layout property like the style.width of the element

I'll investigate further and file a bug against Chrome tomorrow.

ktewes · January 14, 2021, 9:44am

Hi Jonathan,

This is exactly what i did... Will check the other workarounds.

Thanks and regards, Kalle

jonathan · January 15, 2021, 10:40pm

Another workaround I found is that if you add a border, even if it uses a 0% alpha to be transparent, the text will show up correctly.

The final steps to reproduce are remarkably simple, so I think this has a good shot of being fixed. I filed the bug here:

Thanks for reporting this!