nicht angemeldet
Gunnar Bittersmann
MudGuard
Gunnar Bittersmann
encoder
Rolf B
Rolf B
Gunnar Bittersmann
Strange new worlds…
Im Firefox 97.0.2 und 98.0b10 (auf macOS Catalina 10.15.7) erscheint bei Prodigy rechts eine Linie, die da nicht hingehört:
Und das auch nur bei 100% Zoom, bei [cmd][+] oder [cmd][−] ist sie weg.
(Oder was auch immer bei euch anstatt [cmd] zu drücken ist.)
Sie tritt nicht auf, wenn die Tabelle breiter ist: Test-PRO.
Sie tritt auch nicht auf, wenn die Tabelle länger ist: Test-TOS.
Safari und Chromia sind nicht betroffen.
Könnt ihr den Bug auf anderen Betriebssystemen nachvollziehen?
Hat jemand eine Erklärung, wo die Linie herkommt? Und vielleicht einen Hack, wie man die wegbekommt?
🖖 Живи довго і процвітай
Hi,
Im Firefox 97.0.2 und 98.0b10 (auf macOS Catalina 10.15.7) erscheint bei Prodigy rechts eine Linie, die da nicht hingehört:
97.0.1 zeigte die Linie, allerdings erst bei Vergrößerung um 1 Stufe.
97.0.2 zeigt die Linie nicht, egal welche Zoomstufe.
Beides unter Windows 8.1
91.0.2 auf Win 10 zeigt die Linie nicht, egal welche Zoomstufe. (hier kann ich nicht updaten - Update disabled by SysAdmin …)
cu,
Andreas a/k/a MudGuard
@@Gunnar Bittersmann
Hat jemand eine Erklärung, wo die Linie herkommt?
Das nicht, aber …
Und vielleicht einen Hack, wie man die wegbekommt?
Setzen der Hintergrundfarbe main { background: var(--background-color) } macht die Linie weg.
🖖 Живи довго і процвітай
@@Gunnar Bittersmann
Und vielleicht einen Hack, wie man die wegbekommt?
Setzen der Hintergrundfarbe
main { background: var(--background-color) }macht die Linie weg.
main { background: inherit } tut’s auch.
Im Stylesheet für die Seite ergänzt.
Ist damit der Darstellungsfehler auf anderen OS auch weg? @MudGuard
Die Seite mit dem Fehler hab ich wonandershin verschoben und die Links in den Postings hier im Thread angepasst.
🖖 Живи довго і процвітай
@@Gunnar Bittersmann
Und vielleicht einen Hack, wie man die wegbekommt?
Setzen der Hintergrundfarbe
main { background: var(--background-color) }macht die Linie weg.
main { background: inherit }tut’s auch.
Nö. Weder das Eine noch das Andere.
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Also wenn jemand einen besseren Vorschlag hat …
🖖 Живи довго і процвітай
@@Gunnar Bittersmann
Und vielleicht einen Hack, wie man die wegbekommt?
Setzen der Hintergrundfarbe
main { background: var(--background-color) }macht die Linie weg.
main { background: inherit }tut’s auch.Nö. Weder das Eine noch das Andere.
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Friedelmain {
background: linear-gradient(
to bottom,
transparent calc(var(--header-height) + 1px),
var(--background-color) 0 calc(var(--header-height) + 2px)
) fixed;
}
Jetzt isses aber ein Würgaround.
Bin für bessere Vorschläge offen …
🖖 Живи довго і процвітай
@@Gunnar Bittersmann
main { background: linear-gradient( to bottom, transparent calc(var(--header-height) + 1px), var(--background-color) 0 calc(var(--header-height) + 2px) ) fixed; }
Der Teil hinter der 0 macht keinen Sinn. Weg damit:
main {
background: linear-gradient(
to bottom,
transparent calc(var(--header-height) + 1px),
var(--background-color) 0
) fixed;
}
Jetzt isses aber ein Würgaround.
Immer noch.
🖖 Живи довго і процвітай
Hi,
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Da war und ist keine Linie …
cu,
Andreas a/k/a MudGuard
@@MudGuard
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Da war und ist keine Linie …
Du meinst da nicht?
Da soll keine sein. Würde ja nur stören.
Die Linie soll erst kommen, wenn ein Stück gescrollt wird:
Hast du sie?
Auf macOS hab ich sie in Firefox, Safari und Chromia.
Im Safari auf iOS/ipadOS hingegen ist keine zu sehen. WTF‽
Muss ich noch ein bisschen basteln. Könnte auf IntersectionObserver hinauslaufen.
🖖 Живи довго і процвітай
Hi,
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Da war und ist keine Linie …
Du meinst da nicht?
Guck mal den Screenshot im Posting vom 06. um 13:25
Da ist zwischen Navi und Tabelle ne kurze waagrechte Linie - ich dachte, daß Du die meinst.
Die Linie soll erst kommen, wenn ein Stück gescrollt wird:
Ah, da mußte ich erst mal mein Fenster massiv verkleinern, damit das überhaupt scrollbar wird.
Dann ist die Linie da.
cu,
Andreas a/k/a MudGuard
@@MudGuard
Damit ist die Linie zwischen sticky Navigation und scrollendem Seiteninhalt weg:
Da war und ist keine Linie …
Du meinst da nicht?
Guck mal den Screenshot im Posting vom 06. um 13:25
Da ist zwischen Navi und Tabelle ne kurze waagrechte Linie - ich dachte, daß Du die meinst.
Am linken und am rechten Rand. Ja, die Linie meinte ich. Die soll durchgängig sein, wurde aber bei dem Zwischenstand vom weißen Hintergrund des main-Elements überdeckt.
Deshalb hat das main-Element jetzt oben einen transparenten Hintergrund; das Weiß beginnt erst 1px später.
Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Die Linie soll erst kommen, wenn ein Stück gescrollt wird:
Ah, da mußte ich erst mal mein Fenster massiv verkleinern, damit das überhaupt scrollbar wird.
Oder eine andere Serie schauen.
Mein Fehler, ich hätte das genauer beschreiben sollen.
🖖 Живи довго і процвітай
@@Gunnar Bittersmann
Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man nach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen IntersectionObserver genommen und damit eine Klasse "scrolled" am body- oder html-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der header und seine Nachfahren scheiden wegen position: sticky aus.
Ich war schon drauf und dran, ein leeres div vor den header zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: head!!! (Drei Ausrufezeichen. Nein, ich bin nicht verrückt.) Um den im Auge zu haben muss man ihn nur sichtbar machen:
head { display: block }
head > * { display: none }
und dann kann man ihn auch observieren: 👀
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf ResizeObserver umgestellt. Ich nehme stark an, dass die Browser das mindestens ebenso performant – vermutlich sogar besser – implementiert haben als wenn man selbst Debouncing oder Throttling implementieren würde.
Vorher:
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
Nachher:
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
Amazing discovery. Zu sehen bspw. bei Discovery (pun intended).
🖖 Живи довго і процвітай
Hi,
Ist damit der Darstellungsfehler auf anderen OS auch weg? @MudGuard
[ ] ja
[ ] nein
[X] vielleicht
Das ist bei mir nur beim 97.0.1 auf Win 8.1 aufgetreten. Nach dem Update auf 97.0.2 nicht.
Ich werd jetzt kein Downdate auf 97.0.1 machen …
cu,
Andreas a/k/a MudGuard
Hat jemand ... vielleicht einen Hack, wie man die wegbekommt?
Warum? Progressive enhancement Mozilla Bugfix at work.
Erscheint bei mir nur wenn ich dein Script im Scriptblocker erlaube.
Und die Linie fällt mit der über die ganzen Breite gehenden Linie zusammen, die erscheint wenn man das Fenster so niedrig macht dass man es scrollen kann und der Inhalt nach oben gescrollt wird.
Hallo encoder,
das Script setzt lediglich das custom property --header-height auf die reale Höhe des Headers. Ohne Script ist das Ding auf Default.
Die Linie erscheint, wenn man Gunnars magischen Gradienten aktiviert:
background: linear-gradient(
to bottom,
var(--background-color) var(--header-height, 0),
var(--rule-color) 0 calc(var(--header-height, 0) + 1px),
var(--background-color) 0 )
fixed;
Und sie verschwindet, wenn main einen Hintergrund bekommt bzw. die Table so breit wird, dass sie die Linie antippt.
Sie liegt auf einer Höhe von 80px - was sich zusammen mit dem --table-margib verschiebt und beginnt bei einem linken Offset von ... trommelwirbel - 1024px. Magic value!!!
Es ist definitiv ein Rundungsfehler in der Darstellung des Gradienten. Ohne Gradient ist die Linie weg. Modifiziert man den Basisfont des Dokuments, z.B. von 16px auf 16.4px, ist sie weg. Bei 16.6px ist sie wieder da.
Rolf
Chromium Version 98.0.4758.102 (Offizieller Build) snap (64-Bit) (Linux)
Da sehe ich bei unverschämter Vergrößerung 2 oder 3 solcher Linien in der Tabelle.
Die verschwinden, wenn ich das border-collapse in Zeile 141 deaktiviere.
table {
margin: var(--table-margin) 0;
table-layout: fixed;
border-collapse: collapse;
}
(style.css?date=2022-03-06T12:39Z)
P.S. Du sollst doch px und em/rem bei Größenangaben nicht mixen.
Hallo Gunnar,
viel mehr als der falsche Strich würde mich ja interessieren, welche Magie den richtigen Strich versteckt solange die Seite ungescrollt ist. DAS kapiere ich nicht.
Rolf
@@Rolf B
viel mehr als der falsche Strich würde mich ja interessieren, welche Magie den richtigen Strich versteckt solange die Seite ungescrollt ist. DAS kapiere ich nicht.
html {
background: linear-gradient(
to bottom,
var(--background-color) var(--header-height, 0),
var(--rule-color) 0 calc(var(--header-height, 0) + 1px),
var(--background-color) 0
) fixed;
}
body {
background: linear-gradient(
to bottom,
var(--background-color) calc(var(--header-height) + var(--table-margin)),
transparent 0
);
}
Das html-Element hat einen feststehenden var(--background-color)-farbigen Hintergrund in (im light mode ist das weiß) mit einer 1px hohen var(--rule-color)-farbigen horizontalen Linie genau unter der Höhe des Headers.
Darüber liegt der Hintergrund des bodys: oben var(--background-color)-farbig, ab Headerhöhe + ein bisschen was ist er transparent.
Initial verdeckt der Hintergrund des bodys also die horizontale Linie. Wird nun gescrollt, bleibt der html-Hintergrund (also auch die Linie) stehen; der body-Hintergrund scrollt aber mit und gibt dann die Linie frei.
🖖 Живи довго і процвітай
Bei mir (Firefox 97.0.2 unter Linux Mint) ist die Linie bei Vergrößerung von 90% zu sehen. Und das unabhängig davon ob ich das Fenster so sehr verkleinere, dass Scrollbars erscheinen. Tückischerweise verschwindet sie, wenn man den Web Developer benutzt. Ursache habe ich bisher keine gefunden.
Hallo Gunnar,
aua. Ich hab am header, am main und am table Element nach der Maske gesucht. Auf den body bin ich nicht gekommen 😂
Rolf
Hallo Gunnar,
ich hab was. Es ist genauso hässlich, aber es gibt keinen Strich. Lass die Lineargradienten an html und body weg und hexe es mit Pseudoelementen und einer Border:
body::before,
body::after {
content: " ";
display: block;
top: 0;
left: 0;
width: 100%;
}
body::before {
position: fixed;
border-bottom: 1px solid silver;
height: calc(1px + var(--header-height));
z-index: 1;
}
body::after {
position: absolute;
background: var(--background-color);
height: calc(var(--header-height) + var(--table-margin));
z-index: 2;
}
header {
z-index: 3;
}
In der z-Achse liegt das ::before unten und enthält den Strich als bottom-border. Es ist 1px (oder die Breite der Linie) höher als der header, d.h. es guckt unter dem Header weg.
Es folgt das ::after in der gewünschten Maskierungshöhe.
Obendrauf liegt das header Element. Beim Scrollen bleiben Strich und Header da, und die Maske schiebt sich weg. Wäre der Strich Teil des Body, könnte man auf ein Pseudoelement verzichten.
Gefallen tut es mir nicht, aber offenbar wird der linear-gradient nur in der Breite von 1K Pixel gerendert, solange dort nichts anderes ist. Möglicherweise kann man auch mit einem 1px hohen Image und passender Positionierung eines repeat-x background etwas hexen. Immerhin muss man kein Markup dafür einfügen, und man braucht auch keinen Observer.
Rolf
Hallo Gunnar,
Nachtrag: Du hast noch ein anderes Todo. Deine "Normalseite" /startrek/series funktioniert beim Zoomen auch nicht richtig, der Header überlagert bei manchen Zoomstufen den Trennstrich (FF 98/Windows 10).
Das passiert auch bei meiner ::before/::after Idee, das sind die Fehler beim Runden auf ganze Pixel.
Man könnte den Header bis zum Rand gehen lassen und den Strich 2px hoch machen.
Rolf
@@Gunnar Bittersmann
Im Firefox 97.0.2 und 98.0b10 (auf macOS Catalina 10.15.7) erscheint bei Prodigy rechts eine Linie, die da nicht hingehört:
Fürs Archiv: Ich habe endlich mal ein Bugticket angelegt.
🖖 Живіть довго і процвітайте