vk.com thumbnails gone wrong

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 try and 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
Posts: 7
Joined: 2021-12-04, 22:07

vk.com thumbnails gone wrong

Unread post by sidology » 2021-12-04, 22:13

With other browsers I get 4 small thumbnails in a row, with Pale Moon I get huge ones:


Started happening recently, is there a work around?

User avatar
Pale Moon guru
Pale Moon guru
Posts: 31342
Joined: 2011-08-28, 17:27
Location: Tranås, SE

Re: vk.com thumbnails gone wrong

Unread post by Moonchild » 2021-12-04, 23:58

Report this to VK. It's an error in their CSS (telling a flex item to grow to fit content and setting content of a containing element to 100% will grow it to 100% of the flexbox)

Offending code:

Code: Select all

.PlaylistsSlider.ui_gallery .VideoCard, .PlaylistsSlider .ui_gridsorter_cont > .ui_gridsorter_placeholder 

Code: Select all

flex: 1 0 30%;
(the "1" there means flex-grow: 1 - meaning yes, grow with content)
and containing element sets width/height to 100%:

Code: Select all

.VideoCard__thumb {
    position: absolute;
    top: 0;
    width: 100%; <-- Here and
    height: 100%; <-- Here
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--placeholder_icon_foreground_primary);
    line-height: 16px;
if they don't want the flex item to grow, they need to tell it not to grow. :P
"Remember, only you can prevent Earth's destruction by spelling Pale Moon with a space." -- Athenian200

Post Reply