1538527 - Table of contents on developer.apple.com isn't properly displayed

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect)

Description

[csheany]

User Agent: Mozilla/5.0 (Android 7.1.1; Tablet; rv:68.0) Gecko/68.0 Firefox/68.0

Steps to reproduce:

1. Open https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Actual results:

See the attached screenshot

Expected results:

To be determined

Comment 1

[csheany]

Attachment: Screenshot_20190323-225809.jpg

Comment 2

[Stefan Deiac]

Hi, thanks for your report. I can confirm this issue using Nexus 9 (Android 7.1.1) and OnePlus 5T (Android 9). This issue is reproducible on Nightly 68.0a1 (2019-03-24) and Release 66.0.1. Due to that, I'll make this issue as New, thanks.

Comment 3

[csheany]

Botond, would mind taking a look?

Comment 4

[Botond Ballo [:botond]]

I can confirm this page behaves very poorly in Firefox compared to Chrome.

Looping in some webcompat folks in the hope that they can help with an initial diagnosis.

Comment 5

[csheany]

Thank your for your response.

Did it open by itself upon loading?

Are you able to close?

Working in older versions?

Comment 6

[Karl Dubost💡 :karlcow]

This is a known issue.
https://github.com/webcompat/web-bugs/issues/4070

Apple has been contacted already about it a long time ago.
They did add the suggestion of Thomas in
https://github.com/webcompat/web-bugs/issues/4216#issuecomment-271604872

but it seems not enough to solve the issue.

They rely on zoom.

They should probably do

/* screen.css | https://developer.apple.com/library/archive/Resources/1282/CSS/screen.css */

@media only screen and (min-device-width: 320px) and (max-device-width: 980px), (min-device-width: 1024px) and (max-device-width: 1024px) and (min-device-height: 1366px) and (max-device-height: 1366px) and (min-width: 320px) and (max-width: 980px), (min-device-width: 1024px) and (max-device-width: 1024px) and (min-device-height: 1366px) and (max-device-height: 1366px) and (min-width: 320px) and (max-width: 980px) {
  #tocContainer {
    transform-origin: 0 0;
    transform: scale(1.4);
  }
}

Let's close this one here and switched to the webcompat issue.

Comment 7

[Karl Dubost💡 :karlcow]

INCOMPLETE because we can't duplicate to https://webcompat.com/issues/4070