Office-js: Clicking an empty href “shrink” outlook web add in

[Hongbo-Miao]

Clicking an empty href “shrink” outlook web add in

Below is copy from Stack Overflow:

---

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?

[TheSamsterZA]

Hello,

There is another Stack Overflow question/answer here showing a similar issue for Word 2016 for Windows.

TL;DR: It looks like there's a bug in Word 2016 for Windows that affects window.devicePixelRatio for OfficeJS add-ins that use Angular's Router, with hash location strategy enabled. This bug does not occur on Word Online using either IE11 or Chrome.

I am not sure if any other similar settings are affected - this is just the one that I happened to notice.

You can find my simple repro here.

[alx-andru]

Hey,
any updates on this? I'm facing the same issue

[alx-andru]

@TheSamsterZA try using skipLocationChange
<a routerLink="/dashboard" [routerLinkActive]="['active']" skipLocationChange>

This prevents the physical route to change and prevents the devicePixelRatio change.

[TheSamsterZA]

Hey @alx-andru this sort-of works, thanks! The problem is, the very first navigation (the one that loads my add-in) causes window.devicePixelRatio to decrease, while subsequent navigations (using Angular's Router and skipLocationChange) do not.

To summarize, it appears that having a # (hash) in the URL AND updating the push state of the browser's history causes window.devicePixelRatio to decrease. The effect being, that the add-in content appears to shrink with each navigation.

So, I'm calling this a partial workaround until the OfficeJS team fix the underlying issue.

Ping @Hongbo-Miao and @Zlatkovsky.

[Hongbo-Miao]

The fix was released on 1/18/2018. Might take a while to see it.

[TheSamsterZA]

@Hongbo-Miao what version number for Word 2016 would contain this fix?

[Hongbo-Miao]

Sorry, I am not the owner of this. I simply help create the issue in the beginning. I don't have the full status of this. I have to ask the team and then answer here.
I am looping correct PM or engineer to answer here directly.

[briwilcox]

I'm not the owner but I'm the original filler of the issue on SO. Thanks for looking into this.

[Zlatkovsky]

The fix should be in build 16.0.9019.1000 or greater. Historically-speaking (just looking at the stats of previous builds), that should put it into the Insiders channel (formerly called Insider Fast) within ~3 weeks. And then another 2-3 weeks before it makes it to Monthly Channel (Targeted) (formerly called Insider Slow.), and another couple weeks more before it makes it to the main "current".

More info on Office Insider: https://support.office.com/en-us/article/what-is-office-insider-f4208185-b63a-4b68-9c7a-9a32d2411c16

Looking forward to hearing from you once you've had a chance to try it out. Do let us know...

[TheSamsterZA]

Hello @Zlatkovsky, I have given this a go on:

Microsoft Office 365 Business
Outlook 2016 Version 1802 (Build 9020.2003 Click-to-Run)
Office Insider

and can confirm that the issue has indeed been fixed! 🎉 Thank you so much!

If my math is right, then the fix should trickle down to the main / current channel in March / April 2018, correct?

[Zlatkovsky]

Glad it worked!

The fix is going to be part of the "January fork" (i.e., 16.0.9029.XXXX). So yes, historically-speaking from looking at previous build stats, it will probably be late February by the time it's on Insiders (formerly "insiders slow"), and mid-March for the current channel. (All guesstimates, of course). But yes, it is heading your way :-)

Best!
~ Michael

[lindalu-MSFT]

@TheSamsterZA Hi, and thanks again for reporting this! As we believe the issue has been resolved and deployed, I'm going to close this issue. If you feel there is still an issue that needs to be re-triaged, please open a NEW issue and we will triage it. Thanks! lindalu