--- title: "Eroarea de pe un browser pe care nu îl aveam" description: "Titlurile de produs ieșeau din chenar doar pe telefon. Trei medii care pretindeau că sunt randarea de pe mobil spuneau, toate, că pagina e în regulă. Numărarea unei singure valori CSS pe pagina live a scos la iveală cauza, fără nicio reproducere." date: 2026-08-27 lang: ro canonical: https://goingstellar.ro/ro/cercetare/eroarea-de-pe-un-browser-pe-care-nu-l-aveam/ author: Going Stellar publisher: GOING STELLAR S.R.L. topic: Depanare license: CC BY 4.0 alternate_en: https://goingstellar.ro/research/the-bug-on-a-browser-we-did-not-have/ --- # Eroarea de pe un browser pe care nu îl aveam *Titlurile de produs ieșeau din chenar doar pe telefon. Trei medii care pretindeau că sunt randarea de pe mobil spuneau, toate, că pagina e în regulă. Numărarea unei singure valori CSS pe pagina live a scos la iveală cauza, fără nicio reproducere.* > Depanare · 2026-08-27 · https://goingstellar.ro/ro/cercetare/eroarea-de-pe-un-browser-pe-care-nu-l-aveam/ ## Pe scurt - Emularea de mobil schimbă viewportul și user agentul, nu motorul care rezolvă CSS-ul, deci nu poate reproduce o diferență de randare între motoare. - Când o pagină se randează greșit doar pe un dispozitiv pe care nu îl ai, renunță la reproducere și numără valorile din HTML-ul live. - Declarația -webkit-line-clamp: 0 e invalidă; motoarele de desktop o tratează în tăcere ca none, iar un browser de mobil o aplică și strânge caseta de text la un singur rând. - O valoare rară e cauza doar dacă elementele care o poartă sunt exact cele stricate; o valoare care acoperă și elemente sănătoase e un semnal mai slab. ## Ce făcea pagina Pe pagina de start a unui magazin, titlurile de produs se suprapuneau peste badge și peste preț. Doar pe telefon. Pe toate mediile de desktop pe care le aveam, aceeași pagină se randa corect. Forma defectului contează. Nu era un text care intră greu într-un chenar puțin prea mic. Caseta de text se strângea la un singur rând, în timp ce textul continua să fie desenat pe trei sau patru rânduri, direct peste ce urma dedesubt. Browserul cu pricina nu exista pe niciunul dintre calculatoarele noastre. Situația e obișnuită, iar reflexul e să reproduci întâi defectul. Am mers pe drumul ăsta și ne-a costat. ## Trei medii, și toate trei se înșelau Prima încercare: un browser de desktop cu emulare de mobil. Pagina se randa corect. A doua: chiar editorul constructorului vizual de pagini. Corect. A treia: am scris o mică aplicație nativă în jurul web view-ului platformei și am încărcat pagina în ea. Tot corect. Trei medii, fiecare pretinzând că e randarea de pe telefon, și toate trei se înșelau. Emularea schimbă viewportul (zona vizibilă) și user agentul; nu schimbă motorul care rezolvă CSS-ul. Editorul constructorului rulează chiar în browserul de desktop pe care îl ai deja deschis. Web view-ul pe care l-am împachetat rezolva declarația exact ca desktopul. Forma generală merită spusă direct: timpul petrecut încercând să reproduci un defect e pierdut ori de câte ori defectul e o diferență de randare între motoare, fiindcă încercarea de reproducere întreabă motorul greșit. Fiecare „la mine merge” era un adevăr despre altceva. ## Am numărat, în loc să reproducem Am renunțat la reproducere și am trecut la numărat. Am luat HTML-ul paginii live și am făcut histograma unei singure proprietăți personalizate, pe fiecare bloc de text din pagină. 42 de blocuri aveau valoarea **unset**. Toate se randau corect. Exact 6 aveau valoarea **zero**. Erau exact cele 6 stricate. Aceeași regulă CSS, aceeași pagină, același browser. Singura diferență între setul sănătos și cel stricat era valoarea. Asta e o comparație controlată, iar pagina live o rulase deja în locul nostru — n-a trebuit decât s-o citim. ## De ce zero strânge caseta la un rând Setarea „număr maxim de rânduri” din constructorul vizual, lăsată pe zero, emite declarația **-webkit-line-clamp: 0**. Zero nu e o valoare validă pentru proprietatea asta. Motoarele tratează diferit valorile invalide. Browserele de desktop, editorul constructorului și web view-ul de desktop o reduc în tăcere la **none** și randează ca și cum n-ar fi fost scrisă niciodată. Un singur browser de mobil o aplică literal: caseta se strânge la un singur rând, în timp ce textul continuă să fie desenat pe trei sau patru rânduri și iese peste ce urmează. Mai e o capcană în același control. Comutatorul „oprit” scrie tot zero, așa că „fără limită” și „limită de zero rânduri” ajung la browser ca aceeași declarație. Singura stare sigură e „pornit”, cu un număr pozitiv. ## Cum faci aceeași verificare Când ceva se randează greșit doar pe o clasă de dispozitive, iar clasa aia nu o ai, oprește reproducerea și începe să numeri. Ia HTML-ul live. Extrage fiecare valoare a proprietății sau a variabilei suspecte. Fă un tabel de frecvențe. Apoi caută valoarea rară și verifică dacă seturile coincid: elementele care o poartă sunt exact cele stricate? *Exact* e cuvântul care face toată treaba. O valoare rară care acoperă și elemente sănătoase e un semnal mai slab, nu o cauză. Dacă potrivirea e exactă, ai cauza fără să ai vreodată dispozitivul. Îți trebuie doar lista elementelor stricate și markupul, pe care îl poți lua de oriunde. ## Limitări Metoda funcționează când elementele stricate sunt destul de multe încât să le poți compara cu unele sănătoase din aceeași pagină. Un element stricat, fără pereche sănătoasă lângă el, nu-ți dă cu ce compara. Mai cere ca diferența să fie scrisă în markup, nu calculată la rulare. O valoare pusă de script după încărcare, sau rezolvată dintr-un media query pe care descărcarea nu îl declanșează, nu apare în HTML-ul luat cu fetch. În fine, identifică o corelație pe o singură pagină. Nu demonstrează, singură, mecanismul. Pentru asta tot a trebuit să știm că zero e invalid pentru proprietatea aceea și că motoarele nu cad de acord asupra valorilor invalide. ## Întrebări și răspunsuri ### De ce iese textul din chenar pe telefon, deși emularea de mobil arată pagina corect? Textul poate ieși din chenar pe telefon, deși emularea de mobil arată pagina corect, pentru că emularea schimbă viewportul și user agentul, nu motorul care rezolvă CSS-ul. Într-un caz, titlurile de produs aveau caseta strânsă la un rând, iar textul se desena peste badge și preț. Emularea de desktop, editorul constructorului vizual și un web view împachetat randau corect, fiindcă întrebau motorul greșit. ### Ce face declarația -webkit-line-clamp: 0? Declarația `-webkit-line-clamp: 0` e invalidă, iar motoarele de browser o tratează diferit. Browserele de desktop și web view-ul de desktop o reduc în tăcere la none și randează ca și cum n-ar fi fost scrisă. Un browser de mobil o aplică literal: caseta de text se strânge la un singur rând, iar textul continuă să fie desenat pe mai multe rânduri, peste elementele care urmează. ### Cum depanez o eroare de randare de pe un browser pe care nu îl am? O eroare de randare de pe un browser pe care nu îl ai se depanează numărând, nu reproducând. Iei HTML-ul live, extragi fiecare valoare a proprietății sau a variabilei suspecte și faci un tabel de frecvențe. Pe o pagină, 42 de blocuri de text aveau valoarea unset și se randau corect, iar exact 6 aveau zero și erau exact cele 6 stricate. Potrivirea exactă îți dă cauza fără dispozitiv. ### De ce strică setarea „număr maxim de rânduri” titlurile de produs pe telefon? Setarea „număr maxim de rânduri” dintr-un constructor vizual de pagini poate strica titlurile pe telefon pentru că, lăsată pe zero, emite -webkit-line-clamp: 0, pe care un browser de mobil o aplică literal. Și comutatorul „oprit” scrie tot zero, așa că „fără limită” și „limită de zero rânduri” ajung la browser ca aceeași declarație. Singura stare sigură e „pornit”, cu un număr pozitiv. ### Când nu găsește numărarea valorilor CSS cauza unei erori? Numărarea valorilor CSS nu găsește cauza unei erori când pe aceeași pagină nu există elemente sănătoase cu care să compari sau când diferența e calculată la rulare, nu scrisă în markup. O valoare pusă de script după încărcare ori rezolvată dintr-un media query pe care descărcarea nu îl declanșează nu apare în HTML-ul luat. Metoda arată o corelație; mecanismul trebuie demonstrat separat. ## Cum se citează **Citare:** Going Stellar (2026). *Eroarea de pe un browser pe care nu îl aveam*. GOING STELLAR S.R.L.. https://goingstellar.ro/ro/cercetare/eroarea-de-pe-un-browser-pe-care-nu-l-aveam/ ```bibtex @misc{goingstellar2026the, title = {Eroarea de pe un browser pe care nu îl aveam}, author = {{Going Stellar}}, year = {2026}, url = {https://goingstellar.ro/ro/cercetare/eroarea-de-pe-un-browser-pe-care-nu-l-aveam/}, note = {2026-08-27} } ``` Licență. Se poate cita liber, cu atribuire. ## Mai există și - Pagina în HTML: https://goingstellar.ro/ro/cercetare/eroarea-de-pe-un-browser-pe-care-nu-l-aveam/ - Același articol în engleză: https://goingstellar.ro/research/the-bug-on-a-browser-we-did-not-have/