docs.com - layout is messed up #3976

webcompat-bot · 2016-12-16T04:43:48Z

URL: https://docs.com/twitch-johnboy8722/5798/cw-s-complete-tuning-guide-and-calculators?c=b6jP2f
Browser / Version: Firefox Mobile 52.0
Operating System: Android 6.0.1
Problem type: Layout is messed up

Steps to Reproduce

Navigate to: https://docs.com/twitch-johnboy8722/5798/cw-s-complete-tuning-guide-and-calculators?c=b6jP2f
…

Expected Behavior:

Actual Behavior:

From webcompat.com with ❤️

adamopenweb · 2016-12-16T18:21:25Z

Thanks for the bug report. I can reproduce this issue in Firefox 53 for Android. The layout of the content is broken in Firefox compared to Chrome.

Firefox:

Chrome:

Firefox:

Chrome:

When we try spoofing the user agent to Chrome in Firefox:

wisniewskit · 2016-12-16T18:33:15Z

The page they're serving to Firefox for Android is being displayed as it "should" be (Chrome would show the same thing). This is the markup it's asked to display:

<div id="p1" name="p1">
  <div style="position: relative; height: 75px; width: 31.821px; overflow: hidden;">
    <img src="mResReaderA.ashx?WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;v=00000000-0000-0000-0000-000000000017&amp;n=p1.img" id="pi1_0" style="position: absolute; clip: rect(-0.13331px, 31.6877px, 74.8667px, -0.13331px); visibility: visible;" width="52.906154357280926">
  </div>
  <div style="position: relative; height: 60.7929px; width: 75px; overflow: hidden;">
    <img src="mResReaderA.ashx?WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;v=00000000-0000-0000-0000-000000000017&amp;n=p1.img" id="pi1_1" style="position: absolute; left: -28.7445px; clip: rect(-0.377596px, 103.744px, 60.4154px, 28.7445px); visibility: visible;" width="187.31908396102108">
  </div>
  <div style="position: relative; height: 75px; width: 20.5974px; overflow: hidden;">
    <img src="mResReaderA.ashx?WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;v=00000000-0000-0000-0000-000000000017&amp;n=p1.img" id="pi1_2" style="position: absolute; left: -32.3939px; clip: rect(-0.106515px, 52.9913px, 74.8935px, 32.3939px); visibility: visible;" width="52.840409091791685">
  </div>
  <div style="direction:ltr;margin-top:5px"><span style="direction:ltr;"> <br></span></div>
  <div style="direction:ltr;margin-top:5px"><b><span style="direction:ltr;"> &nbsp;<br></span></b></div>
  <div style="position: relative; height: 13.897px; width: 75px; overflow: hidden;">
     <img src="mResReaderA.ashx?WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;v=00000000-0000-0000-0000-000000000017&amp;n=p1.img" id="pi1_3" style="position: absolute; top: -22.3838px; left: -3.94517px; clip: rect(22.3838px, 78.9452px, 36.2809px, 3.94517px); visibility: visible;" width="83.06125977788824">
  </div>
  <div style="position: relative; height: 75px; width: 57.0353px; overflow: hidden;">
    <img src="mResReaderA.ashx?WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;v=00000000-0000-0000-0000-000000000017&amp;n=p1.img" id="pi1_4" style="position: absolute; top: -38.0235px; left: -15.0992px; clip: rect(38.0235px, 72.1345px, 113.024px, 15.0992px); visibility: visible;" width="87.47980144425055">
  </div>
</div>

Whereas this is the markup they send to desktops/Chrome for Android (note the single image):

<div class="WACPageBorder WacAirSpaceShared_BasicClass" id="WacAirSpace477970e4-1666-4ca6-b0d8-ab3e5e91e539" style="height: 481px; width: 340px; left: 10px; top: 10px;">
  <div class="FShadowLeftInner"></div>
  <div class="FShadowLeftOuter"></div>
  <div class="FShadowTopLeftInner"></div>
  <div class="FShadowTopLeftOuter"></div>
  <div class="FShadowTopInner"></div>
  <div class="FShadowTopOuter"></div>
  <div class="FShadowTopRightInner"></div>
  <div class="FShadowTopRightOuter"></div>
  <div class="FShadowRightInner"></div>
  <div class="FShadowRightOuter"></div>
  <div class="FShadowBottomRightInner"></div>
  <div class="FShadowBottomRightOuter"></div>
  <div class="FShadowBottomInner"></div>
  <div class="FShadowBottomOuter"></div>
  <div class="FShadowBottomLeftInner"></div>
  <div class="FShadowBottomLeftOuter"></div>
  <img id="i1" class="WACPageImg WacAirSpaceShared_BasicClass" src="ResReader.ashx?n=p1.img&amp;v=00000000-0000-0000-0000-000000000127&amp;usid=ef653402-49cb-4f85-a0df-cd82b19d0a88&amp;WOPIsrc=https%3A%2F%2Fdocs%2Ecom%2Fapi%2Fwopi%2Ffiles%2FD25192679%2D1739%2D9137%2D1770%2D001115792008%7EM87d9d3e6%2D97b0%2Dadfd%2D4765%2Da79ece62155c%3Fddcv%3D1&amp;access_token=VAR&amp;access_token_ttl=0&amp;z=1&amp;waccluster=US2" style="display: inline; visibility: visible; height: 481px; width: 340px;">
</div>

Spoofing to a Chrome (mobile or desktop) UA gives an error as @adamopenweb shows, and the error console shows that they're using synchronous XMLHttpRequests as well as these errors:

TypeError: b is undefined[Learn More] WordViewer.js:2:758606
	$1Va https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:758606
	Function.createDelegate/< https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:305
	$1HQ https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:190373
	$xX https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189848
	$1HK/< https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189518
	$cB https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:129787
	$1HK https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189494
	Function.createDelegate/< https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:305
	Common.$6K.$1Dk/< https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:264747
	b https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:57480
	$14B https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:58899
	executeRequest https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:61061
	executeRequest https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:88714
	invoke https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:90725
	$11R https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:158196
	$ub https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:156565
	$9n https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:154529
	$1g4 https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:131375
	$dS https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:283716
	$pR https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:126799
	Function.createDelegate/< https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:305
	$SK https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:134066
	$pR https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:133562
	Function.createDelegate/<

TypeError: b is undefined[Learn More]  WordViewer.js:2:758606
	$1Va https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:758606
	Function.createDelegate/< https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:305
	$1HQ https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:190373
	$xX https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189848
	$1HK/< https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189518
	$cB https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:129787
	$1HK https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:189494
	Function.createDelegate/< https://s1-officeapps-15.cdn.office.net/wv/s/1677085952_App_Scripts/MicrosoftAjax.js:5:305
	Common.$6K.$1Dk/< https://s1-word-view-15.cdn.office.net/wv/s/1677085952_App_Scripts/WordViewer.js:2:264747
	b

However, spoofing to a desktop Firefox UA shows the page "properly", just not sized to a mobile screen. I'm not sure what the heck to do about this. It seems like digging in and debugging the code would be a pointless exercise, since they clearly have a method that works in Firefox, as well as a mobile layout that should also work (plus what it's sending Firefox right now is clearly incorrect).

Thoughts, @adamopenweb, @karlcow? Should we contact Microsoft, or try to diagnose why the Chrome versions are causing that error first?

karlcow · 2016-12-18T21:43:45Z

Let's see if @TheWebJustWorks just works can link us to the appropriate people at Microsoft.

TheWebJustWorks · 2016-12-18T22:25:55Z

Adding the Mozilla discussion alias to see if someone is on it from office/docs.com<http://docs.com>

karlcow · 2017-02-02T05:19:35Z

It has been indeed reporter on microsoft mailing-list. Moving to sitewait. thanks @adamopenweb for the ping on IRC

softvision-oana-arbuzov · 2019-08-20T12:02:20Z

I'm not able to access the document. I'm redirected to https://docs.microsoft.com/en-us/?c=b6jP2f

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-08-18), Fenix 1.2.0 (Build #12181645) 📦: 6.0.2 🦎: 69.0-20190729080047
Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

@adamopenweb can you still reproduce the issue?

softvision-sergiulogigan · 2020-02-04T11:32:23Z

Reping @adamopenweb

softvision-raul-bucata · 2021-05-11T15:18:56Z

I am also redirected to: https://docs.microsoft.com/en-gb/?c=b6jP2f and can not access the document:

@karlcow any updates on the link?

Tested with:
Browser / Version: Firefox Nightly (2015809611-🦎90.0a1-20210510093555🦎)
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

karlcow · 2021-05-14T02:38:21Z

Let's close as invalid. Time has passed.

webcompat-bot added browser-firefox-mobile status-needstriage labels Dec 16, 2016

adamopenweb added status-needsdiagnosis and removed status-needstriage labels Dec 16, 2016

wisniewskit added status-needscontact and removed status-needsdiagnosis labels Jan 17, 2017

webcompat-bot added status-sitewait and removed status-needscontact labels Feb 2, 2017

karlcow added this to the sitewait milestone Oct 30, 2017

karlcow removed the status-sitewait label Oct 31, 2017

miketaylr added the engine-gecko The browser uses the Gecko rendering engine label Apr 30, 2019

softvision-oana-arbuzov added status-needsinfo-adamopenweb ping @adamopenweb priority-normal severity-critical The site or core functionality is unusable, or you would probably open another browser to use it. labels Aug 20, 2019

softvision-raul-bucata added the status-needsinfo-karlcow ping @karlcow label May 11, 2021

karlcow modified the milestones: sitewait, invalid May 14, 2021

karlcow removed status-needsinfo-adamopenweb ping @adamopenweb status-needsinfo-karlcow ping @karlcow labels May 14, 2021

karlcow closed this as completed May 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs.com - layout is messed up #3976

docs.com - layout is messed up #3976

webcompat-bot commented Dec 16, 2016

adamopenweb commented Dec 16, 2016

wisniewskit commented Dec 16, 2016

karlcow commented Dec 18, 2016

TheWebJustWorks commented Dec 18, 2016 via email •

edited by karlcow

karlcow commented Feb 2, 2017

softvision-oana-arbuzov commented Aug 20, 2019

softvision-sergiulogigan commented Feb 4, 2020

softvision-raul-bucata commented May 11, 2021

karlcow commented May 14, 2021

docs.com - layout is messed up #3976

docs.com - layout is messed up #3976

Comments

webcompat-bot commented Dec 16, 2016

adamopenweb commented Dec 16, 2016

wisniewskit commented Dec 16, 2016

karlcow commented Dec 18, 2016

TheWebJustWorks commented Dec 18, 2016 via email • edited by karlcow

karlcow commented Feb 2, 2017

softvision-oana-arbuzov commented Aug 20, 2019

softvision-sergiulogigan commented Feb 4, 2020

softvision-raul-bucata commented May 11, 2021

karlcow commented May 14, 2021

TheWebJustWorks commented Dec 18, 2016 via email •

edited by karlcow