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 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
sidology
Moon lover
Moon lover
Posts: 79
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:

https://vk.com/video/@club1762908

Started happening recently, is there a work around?

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

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 
has:

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
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked