header broken on kindle devices
Closed, DeclinedPublicBUG REPORT
Actions

Assigned To

Authored By

	TheDJ
	Nov 26 2021, 4:31 PM

Project Tags

Referenced Files

	F34770107: 7E628A65-F279-4A01-A4C6-26C3A98EEF71.jpg
	Nov 26 2021, 4:31 PM

Subscribers

Description

List of steps to reproduce (step by step, including full links if applicable):
Open a wikipedia page on an (older?) Kindle device

What happens?:
The header of the website is out of place

What should have happened instead?:
The header should be usable

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:

7E628A65-F279-4A01-A4C6-26C3A98EEF71.jpg (873×1,163 px, 79 KB)

This is almost certainly because Kindle doesn't support flexbox and a fallback was not kept in place (also breaks on IE11 in that case btw) when making the changes specified in T294033: [Regression] Large gap appearing between menu and logo on Minerva

Related Objects

Mentioned In: T305971: Change styling for Minerva/MobileFrontend section headings to use flexbox instead of table-cells
T298404: Personal menu logged out breaks into new line on IE10
T294033: [Regression] Large gap appearing between menu and logo on Minerva
Mentioned Here: T294033: [Regression] Large gap appearing between menu and logo on Minerva

Event Timeline

TheDJ created this task.Nov 26 2021, 4:31 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 26 2021, 4:31 PM

Something like this should make the header usable enough:

.minerva-user-navigation {
    display: block;
    min-width: 7em;
    min-height: 3.375em;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.overlay-header, .minerva-header {
    display: block;
    align-items: center;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    height: 3.375em;
    white-space: nowrap;
    border-top: 1px solid #c8ccd1;
    margin-top: -1px;
}

// Backwards compatibility for browsers without flexbox
// This becomes ineffective when the parent becomes flexbox,
// as flexbox children ignore all display except for: none, flex and grid
.minerva-header > *,
.overlay-header > *,
.minerva-user-navigation > * {
    display: table-cell;
}
@supports (display: flex) {
    .minerva-user-navigation,
    .overlay-header,
    .minerva-header {
        display:flex;
    }
}

Untagging as a regression, as the team has talked about the impact of using flexbox before, so this was a expected degradation, but open to reconsidering.

Kindle is a grade C browser per mediawiki.org/wiki/Browser%20compatibility and given the page is still usable it can be argued that this is acceptable, however it is pretty noticeable.

@ovasileva if this is not good enough for a Grade C experience we should update the wiki page to mention that and consider revising a few things in our codebases (new Vector where we also use flex box in the header.). The snippet of code provided by @TheDJ would be a good approach for doing that.

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog-Archived board.Nov 29 2021, 10:09 PM

ovasileva mentioned this in T294033: [Regression] Large gap appearing between menu and logo on Minerva.Dec 3 2021, 2:56 PM

@Jdlrobson The Kindle devices come with a Netfront based Webkit browser. I would clearly put them into Unknown (Grade X) support, not Grade C.

In T296551#7557739, @Volker_E wrote:

@Jdlrobson The Kindle devices come with a Netfront based Webkit browser. I would clearly put them into Unknown (Grade X) support, not Grade C.

I'm going to go ahead and resolve this based on this - currently, we don't offer full support for Grade X browsers and bugs like this are within the realm of the expected.

Jdlrobson changed the task status from Resolved to Declined.Dec 14 2021, 4:10 PM

Jdlrobson mentioned this in T298404: Personal menu logged out breaks into new line on IE10.Jan 5 2022, 11:45 PM

Jdlrobson mentioned this in T305971: Change styling for Minerva/MobileFrontend section headings to use flexbox instead of table-cells.Apr 14 2022, 5:51 PM

header broken on kindle devicesClosed, DeclinedPublicBUG REPORTActions

Description

Related Objects

Event Timeline

header broken on kindle devices
Closed, DeclinedPublicBUG REPORT
Actions