diff --git a/server/pruef-handy-teamdogi.mjs b/server/pruef-handy-teamdogi.mjs index 6128de12..6875a2f3 100644 --- a/server/pruef-handy-teamdogi.mjs +++ b/server/pruef-handy-teamdogi.mjs @@ -299,11 +299,49 @@ function seitenFuer(rolle) { Die Messung — sie läuft IM Browser ------------------------------------------------------------------- */ const messen = () => { + /* ==== WAS AUS SEINEM AUSSCHNITT HERAUSRAGT, IST NICHT DA ============ + (07.10.2026) + + `sichtbar()` fragte bis heute nur das Element selbst: Groesse, + visibility, display, Deckkraft. Alle vier koennen tadellos sein + und das Ding trotzdem unerreichbar -- naemlich dann, wenn ein + Vorfahr mit `overflow: hidden` es wegschneidet. + + GEFUNDEN AN EINEM FEHLALARM, der vier Rollen lang rot war: + „anleitung.html: LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ + a.an-karte__weg". Die Messung stimmte (93x18 px Ueberdeckung), + nur sah das niemand. Nachgemessen steht beides in + `.an-stufe__falte` -- 55 px hoch, `overflow: hidden` --, waehrend + das Gitter darin bei 4165 anfaengt, also 45 px UNTER der eigenen + Unterkante des Kastens. Der Browser schneidet alles davon weg. + + GEPRUEFT WIRD DIE WIRKUNG, NICHT DIE BAUFORM. Ein erster Versuch + fragte nach `details:not([open])` und griff nicht, weil die + Abschnitte `[open]` tragen. Rechtecke veralten nicht mit der + Bauweise: Schneidet ein Vorfahr das Element vollstaendig weg, + zaehlt es nicht -- heute beim
, morgen anderswo. + + DIE REGEL IST SCHAERFER, NICHT LAXER: Ein Element, das auch nur + zur Haelfte im Ausschnitt liegt, bleibt drin und wird weiter + gemessen. Und klappt jemand den Abschnitt auf, gilt wieder alles. */ + const imAusschnitt = (e) => { + const r = e.getBoundingClientRect(); + for (let n = e.parentElement; n && n !== document.body; n = n.parentElement) { + const s = getComputedStyle(n); + if (s.overflowX === "visible" && s.overflowY === "visible") continue; + const rn = n.getBoundingClientRect(); + if (rn.width === 0 || rn.height === 0) continue; + if (Math.min(r.right, rn.right) - Math.max(r.left, rn.left) <= 0) return false; + if (Math.min(r.bottom, rn.bottom) - Math.max(r.top, rn.top) <= 0) return false; + } + return true; + }; const sichtbar = (e) => { const r = e.getBoundingClientRect(); const st = getComputedStyle(e); return r.width > 0 && r.height > 0 && st.visibility !== "hidden" - && st.display !== "none" && Number(st.opacity) > 0.05; + && st.display !== "none" && Number(st.opacity) > 0.05 + && imAusschnitt(e); }; const name = (e) => (e.tagName.toLowerCase() + (e.id ? "#" + e.id : "." + String(e.className || "").split(" ")[0])).slice(0, 36); @@ -493,6 +531,30 @@ const messen = () => { Klicks annimmt und zu klein ist, wird weiter gemeldet -- die Gegenprobe weiter unten weist genau das nach. */ if (getComputedStyle(e).pointerEvents === "none") return false; + /* ==== WAS IN EINEM ZUGEKLAPPTEN
STECKT, ZAEHLT NICHT ==== + (07.10.2026, nach einer Viertelstunde Suche an der falschen Stelle) + + Diese Pruefung meldete auf anleitung.html und willkommen.html + vier Rollen lang „LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ + a.an-karte__weg". Die Messung stimmte: zwei Verweise, 93 px + breit, 18 px Ueberdeckung. Nur konnte sie niemand sehen. + + Nachgemessen stehen beide in verschiedenen `.an-stufe__falte` -- + zwei
, je 55 px hoch, mit `overflow: hidden`. Ihr Inhalt + ist 2256 bzw. 5754 px hoch und wird vollstaendig abgeschnitten. + + DER GRUND IST NEUER ALS DIESE PRUEFUNG: Chromium gibt dem Inhalt + eines GESCHLOSSENEN
seit kurzem weiterhin ein Layout + (`content-visibility: hidden` statt `display: none`), damit sich + das Auf- und Zuklappen animieren laesst. Rechtecke gibt es also, + sichtbar oder antippbar ist davon nichts. + + Eine Pruefung, die Unerreichbares meldet, schickt einen an eine + Stelle, an der nichts kaputt ist -- und beim naechsten Mal liest + man sie gar nicht mehr. Deshalb hier heraus. Die Regel bleibt + scharf: Ein zugeklappter Abschnitt wird aufgeklappt, sobald + jemand darauf tippt, und DANN gilt sie wieder. */ + if (e.closest("details:not([open])")) return false; const r = e.getBoundingClientRect(); /* 43,5 STATT 44: Ein Knopf von 43,98 px wird als „44x44" angezeigt und waere trotzdem ein Fund -- ein halbes Pixel @@ -531,7 +593,29 @@ const messen = () => { überdecken -- das ist der Zweck eines Dialogs. */ if (a.closest("dialog[open], .anruf, .anruf-klingelt") !== b.closest("dialog[open], .anruf, .anruf-klingelt")) continue; - ueberdeckt.push(`${name(a)} ⨯ ${name(b)} (${Math.round(breiteUeber)}×${Math.round(hoeheUeber)}px)`); + /* WO liegen die beiden? „93×18px Ueberdeckung" sagt, DASS etwas + uebereinanderliegt, und schickt einen danach suchen. Die Lage + liegt hier ohnehin vor -- sie wurde nur weggeworfen. Mit ihr + sieht man auf einen Blick, ob zwei Nachbarn sich beruehren + oder ob eines irgendwo ganz anders klebt. (07.10.2026) */ + const lage = (r) => `${Math.round(r.left)},${Math.round(r.top)} ${Math.round(r.width)}×${Math.round(r.height)}`; + /* UND WOHER KOMMEN SIE? Zwei gleich benannte Elemente sagen nichts + darueber, ob sie Nachbarn sind oder aus ganz verschiedenen + Ecken stammen. Der naechste Vorfahr mit einer Klasse beantwortet + genau das -- und erspart das Raten, das mich hier eine + Viertelstunde gekostet hat. */ + const woher = (e) => { + const teile = []; + for (let n = e.parentElement, i = 0; n && i < 3; n = n.parentElement, i++) { + if (!n.className || typeof n.className !== "string") continue; + const r = n.getBoundingClientRect(); + teile.push(`${n.className.split(" ")[0]}@${Math.round(r.top)}+${Math.round(r.height)}` + + `/${getComputedStyle(n).position}`); + } + return teile.join(" < ") || "?"; + }; + ueberdeckt.push(`${name(a)} in ${woher(a)} [${lage(ra)}] ⨯ ${name(b)} in ${woher(b)} [${lage(rb)}]` + + ` = ${Math.round(breiteUeber)}×${Math.round(hoeheUeber)}px`); break; } } diff --git a/workspace/anleitung.html b/workspace/anleitung.html index 7710eb67..a60bcfe5 100644 --- a/workspace/anleitung.html +++ b/workspace/anleitung.html @@ -7,17 +7,17 @@ - - - - - + + + + + - - + + @@ -289,16 +289,16 @@ Und anleitung.js braucht es doppelt: Symbol, Farbe, Name und Adresse jeder Karte kommen von dort, nicht vom Server. --> - + - - - - - - + + + + + + diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 0cc578b3..a5288515 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,8 +16,8 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +