Why does clicking an empty href “shrink” my outloo

Question

This is part question, part bug report. To reproduce I created a new project "Outlook Web Add In (C#)" in Visual Studio 2017.

Then it generates a default project. In the default project I change:

<p class="ms-font-xl ms-fontColor-themeDarkAlt ms-fontWeight-semilight">All properties</p>

to:

<a href="#"><p class="ms-font-xl ms-fontColor-themeDarkAlt ms-fontWeight-semilight">All properties</p></a>

Now it gets interesting, prior to clicking the newly created link everything looks as expected:

Prior to clicking

But then when I click the link all of the text in that HTML pane will shrink, more so with each subsequent click:

After clicking several times

No other modifications to the default project were made other than the <a href="#"> </a> around any given header tag. It will continue to shrink the more a user clicks.

Although it doesn't solve my question I have also worked around the bug by changing the href statement to the following:

 <a href="#" onclick="myfunction(); return false;">

My hypothesis is returning false is unexpected by whatever function is causing the content to reduce in size. Is this an expected behavior?

Answer 1

Thanks for reporting, it seems like a bug.

The team is investigating now.

Please track here for update: https://github.com/OfficeDev/office-js/issues/40

Disclosure: I am working for Microsoft.