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
Chromium
Firefox
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.
While testing this, I also noticed that Pale Moon (v29.2.0 (2021-04-27)) has the same issue.
Page layout issue on web page that has a "sidebar"
Moderator: Basilisk-Dev
-
- Hobby Astronomer
- Posts: 19
- Joined: 2020-11-28, 10:32
-
- Pale Moon guru
- Posts: 35647
- Joined: 2011-08-28, 17:27
- Location: Motala, SE
Re: Page layout issue on web page that has a "sidebar"
The layout has conflicting flex CSS keywords.
The "sidebar" is set to
So it's told explicitly not to grow or shrink.
Inside it is a wrapper div with:
and inside that the navigation div with:
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.
The "sidebar" is set to
Code: Select all
flex: 0 0 320px;
width:320 px;
Inside it is a wrapper div with:
Code: Select all
width: 290 px;
Code: Select all
width: 440 px;
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
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
Re: Page layout issue on web page that has a "sidebar"
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.