Page layout issue on web page that has a "sidebar"

Board for discussions around the Basilisk web browser.

Moderator: Basilisk-Dev

User avatar
LehA64
Hobby Astronomer
Hobby Astronomer
Posts: 19
Joined: 2020-11-28, 10:32

Page layout issue on web page that has a "sidebar"

Unread post by LehA64 » 2021-05-12, 17:11

Hi,

I today entered one webshop, that is hard to use with Basilisk, because the "sidebar" used to list the items is partially drawn on top of the description of the single item (the menu related to the selected Item is expanded horizontally). Selected item leaves under the menu, but related images are drawn on top of the menu.
See https://www.fotonordic.fi/product/112429/jjc-loittorengassarja-nikon-runkoihin-aet-nsii--alumiinibajonetit
It is shown fine on Chromium [Version 90.0.4430.212 (Official Build) snap (64-bit)] and Firefox [88.0]. All these are running on Xubuntu 20.04 LTS.
On Basilisk it does not help to use Safe Mode, or to change the User Agent string to match latest Firefox.

BR,
Juha

Basilisk
Image

Chromium
Image

Firefox
Image

When scrolling down, below the position where the blue expanded menu ends, there are blue horizontal lines shown on the expansion area. Images are again drawn on top of that area.
Image

While testing this, I also noticed that Pale Moon (v29.2.0 (2021-04-27)) has the same issue.
Image

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

Re: Page layout issue on web page that has a "sidebar"

Unread post by Moonchild » 2021-05-12, 17:59

The layout has conflicting flex CSS keywords.

The "sidebar" is set to

Code: Select all

flex: 0 0 320px;
width:320 px;
So it's told explicitly not to grow or shrink.
Inside it is a wrapper div with:

Code: Select all

width: 290 px;
and inside that the navigation div with:

Code: Select all

width: 440 px;
Which sizes the content to something larger than the sidebar.

On top, almost every element is set to explicitly inherit from the parent.

Even more so, it has no less than 8 scripts running when you resize, which I did not specifically try to analyze (probably minified anyway) which does more DOM node styling (this is the primary cause for the strange rendering). If you resize the window the display is temporary correct, then when you stop, one of the scripts, forced the outer element styling to override the inner size... mostly (stacking contexts get really messy here). The result is everything snaps back to the flex 0 0 320px wide.

So there's no real conclusion here but designer error. The CSS and layout hierarchy is an absolute mess and clearly only tested to render as intended on Chrome.
"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

New Tobin Paradigm

Re: Page layout issue on web page that has a "sidebar"

Unread post by New Tobin Paradigm » 2021-05-12, 18:35

In the future please attatch photos to the post don't just link them. Some people (and browser defaults) such as my self are moving towards disallowing insecure content on secure pages even if it is in-active like images.

Locked