Google Drive - broken unscrollable file view (flex, height 100%)

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
User avatar
UCyborg
Fanatic
Fanatic
Posts: 171
Joined: 2019-01-10, 09:37

Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by UCyborg » 2022-05-03, 22:37

Hi, do any of the developers have access to Google Drive? Not very long ago, the file view broke. Some relevant CSS code of the problematic element:

Code: Select all

.PEfnhb {
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    outline: none;
    overflow-y: scroll;
    position: relative;
    width: 100%;
}
What's interesting, if you set fixed height in pixels, it behaves properly, can scroll and view all files in the view, but at 100%, you can't see everything and scroll bar disables itself even though it should be enabled. At 99% for instance, you can only scroll as far as you could at 100%.

Some console output:

Code: Select all

Content Security Policy: Couldn’t parse invalid host 'report-sample'  
(unknown)
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified  
(unknown)
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified  
(unknown)
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified  
(unknown)
Unexpected value  parsing height attribute.  
drive
Unexpected value  parsing width attribute.  
drive
Unexpected value  parsing height attribute.  
drive
Unexpected value  parsing width attribute.  
drive
Unexpected value  parsing height attribute.  
drive
Unexpected value  parsing width attribute.  
drive
Content Security Policy: Couldn’t process unknown directive ‘require-trusted-types-for’  
(unknown)
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it.  
bscframe
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.  
(unknown)
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified  
(unknown)
Chat support:  /drive sl undefined undefined  
chat_load.js:133:141
Chat support operator creation succeeded  
chat_load.js:140:403
Chat support created successfully  
chat_load.js:141:11
Empty string passed to getElementById().  
m=b:1800:143

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 570
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by FranklinDM » 2022-05-04, 09:29

They're intentionally hiding the native scrollbars and replacing them with their own, as evidenced by the repeated overflow: none style declarations and differing appearance on other browsers, which doesn't seem to work well with Pale Moon.

You can use the following user style to fix the broken scrolling functionality:

Code: Select all

@-moz-document domain("drive.google.com") {
  body,
  div[data-label] > *,
  #drive_main_page,
  C-WIZ[data-view-root],
  C-WIZ[data-region-root]{
    overflow: auto !important;
  }
}
Off-topic:
IMHO, their custom scrollbars look ugly and reduces visibility due to the transparent background.
Screenshot 2022-05-04 173351.png

User avatar
UCyborg
Fanatic
Fanatic
Posts: 171
Joined: 2019-01-10, 09:37

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by UCyborg » 2022-05-05, 17:49

I suspected the problem might be somewhere else. That CSS makes it better, though it makes the whole thing scrollable, not just the problematic section.

Does custom scroll bar show out-of-the-box on Firefox? I haven't checked yet. Not as obvious on Chromium browsers since they already use custom controls for everything. Is thickness the telling factor? I have Firefox 96 as well where I've flipped all known preferences to restore native OS controls whereever possible as I just prefer that look.

User avatar
RandyC
Newbie
Newbie
Posts: 5
Joined: 2022-05-05, 16:18

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by RandyC » 2022-05-05, 18:25

Good Morning?

I have searched everywhere and can't figure out how to add a "user style"??

It looks like that solution above might fix the problem I am having with the "BRAND NEW" Otter.ai interface that came out a few days ago, "no scrolling bar".

Palemoon is my everyday browser, but unfortunately everyday I find a website with issues, arggh.

I have decided I may have to learn enough to help myself overcome some of these, so I don't have to keep going to Opera, which dang near crashes my computer with zero tabs open!!!

Thank you all in advance and for all you do
Randy

User avatar
RandyC
Newbie
Newbie
Posts: 5
Joined: 2022-05-05, 16:18

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by RandyC » 2022-05-06, 00:16

I found my profile at : C:\Users\your_user_name\AppData\Roaming\Moonchild Productions\Pale Moon\Profiles\

and I found in the "chrome/' folder - userChrome-example.css - which explained:

" * Edit this file and copy it as userChrome.css into your profile-directory/chrome/"

So I pasted the below code into a my new "userChrome.css"

Code: Select all

@-moz-document domain("otter.ai") {
  body,
  div[data-label] > *,
  #drive_main_page,
  C-WIZ[data-view-root],
  C-WIZ[data-region-root]{
    overflow: auto !important;
  }
}

I restarted Palemoon and there is no change at Otter.ai

I am wondering if that code is specific to "Google Drive", I guess I need to start my own thread on my scrollbar issue

Thanks
Randy

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by moonbat » 2022-05-07, 05:38

RandyC wrote:
2022-05-05, 18:25
I have searched everywhere and can't figure out how to add a "user style"??
Install Stylem, a user style manager, and add the script to it. It adds a page to the addon manager for user styles, you can manage them from there. You don't have to mess with userstyle.css - that is to control CSS for the browser's own interface, not for webpages.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

User avatar
opus_27
Apollo supporter
Apollo supporter
Posts: 36
Joined: 2020-06-16, 13:29

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by opus_27 » 2022-05-07, 12:35

You could also try userContent.css instead of userChrome.css.

User avatar
RandyC
Newbie
Newbie
Posts: 5
Joined: 2022-05-05, 16:18

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by RandyC » 2022-05-08, 00:07

[/quote]
opus_27 wrote:
2022-05-07, 12:35
You could also try userContent.css instead of userChrome.css.
So, I tried changing the name to "userContent" but I saw no change in the behavior at Otter.ai
moonbat wrote:
2022-05-07, 05:38
Install Stylem, a user style manager, and add the script to it. It adds a page to the addon manager for user styles, you can manage them from there. You don't have to mess with userstyle.css - that is to control CSS for the browser's own interface, not for webpages.
Stylem is pretty neat, it shows me a great little green light, that my code should be affecting Otter.ai when I go there, but it still doesn't, so I guess the code really isn't correct.

I thank you both!!! I will get back to work on writing up the post for Otter.ai with renewed hope.

Randy

User avatar
UCyborg
Fanatic
Fanatic
Posts: 171
Joined: 2019-01-10, 09:37

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by UCyborg » 2022-05-08, 13:15

Using userContent.css is perfectly valid for storing CSS rules for web sites, but Stylem is obviously more convenient.

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Google Drive - broken unscrollable file view (flex, height 100%)

Unread post by moonbat » 2022-05-09, 01:32

Oh, right - I was confusing it with userChrome.css.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

Locked