login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Samsung S3 position absolute fout (Opgelost)

Offline GroundZero - 10/12/2015 13:53
Avatar van GroundZeroLid Beste,

ik kan helaas geen code laten zien omdat het op een gesloten omgeving staat maar op elke browser en platform werkt het prima, echter op de Samsung Galaxy S3 word de position absolute genegeerd lijkt het wel.

Nu zag ik online dat dit een bekend probleem is, echter krijg ik nergens een oplossing gevonden, misschien hier iemand die er ervaring mee heeft en hoe dit op te lossen is?

Dus kort door de bocht:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .container {
  2.     position:relative;
  3.     width:100px;
  4.     height:100px;
  5.     background:red;
  6. }
  7.  
  8. .mini {
  9.     position:absolute;
  10.     left:10px;
  11.     right:10px;
  12.     width:40px;
  13.     height:40px;
  14.     background:green;
  15. }


In plaats van correct gepositioneerd, staat het, zeker wanneer er binnen een relatief meerdere absoluut staan, alles over elkaar dus gewoon top 0 left 0 lijkt het.

Dit gebeurd alleen op de oudere browsers van Samsung (voorbeeld dus de Galaxy S3).

6 antwoorden

Gesponsorde links
Offline Thomas - 10/12/2015 15:58 (laatste wijziging 10/12/2015 16:07)
Avatar van Thomas Moderator Euh, en hoe worden die elementen gecombineerd? Hoe ziet je HTML document er uit? Is dit HTML5? En hoe kan een blok van 40x40 zowel 10 pixels van de linkerrand staan, alsmede 10 pixels van de rechterrand, terwijl het omvattende blok 100 pixels breed is? Ik zie ook nergens een top in bovenstaande opmaak, dus een default waarde zou 0 zijn?

Daarnaast is het vrij logisch dat alles over elkaar staat, absoluut gepositioneerde elementen worden uit de "flow" van de pagina gehaald en worden gepositioneerd ten opzichte van het eerst bovengelegen element met relati(e)ve positionering.

Zonder HTML is het een beetje koffiedik kijken maar bovenstaande CSS is dus al een beetje dubieus. Weet je zeker dat je je mini divjes niet gewoon wilt floaten in een container ofzo? Wat (welk effect/welke layout) probeer precies je uiteindelijk te bereiken?
Offline GroundZero - 11/12/2015 07:36
Avatar van GroundZero Lid Ik zal even proberen zo veel mogelijk HTML en CSS te plaatsen 
En bovenstaande was maar een voorbeeld om een idee te geven natuurlijk ;)

Zal straks deze post bewerken met wat code en zo voort.
Offline Thomas - 11/12/2015 14:33
Avatar van Thomas Moderator Ik heb overigens een Samsung Galaxy S3 mini (telt dat ook?).

Daarbij heeft Chrome in developer mode ook een "device mode" waarbij een Galaxy SIII gesimuleerd kan worden.

Mijn homepage heeft artikelen waarin codeblokken zitten die ook absoluut gepositioneerde elementen zitten; deze lijken verder prima te werken op dit model.

Ik vermoed daarom toch dat er ergens iets zit in de CSS of HTML waar het apparaat niet goed mee overweg kan, ik ben dan ook benieuwd naar de rest van je code :].
Offline GroundZero - 14/12/2015 09:16 (laatste wijziging 14/12/2015 09:34)
Avatar van GroundZero Lid Sorry, code zal ik (beloofd!!!) vandaag plaatsen! 

Op de Chrome browser werkt het inderdaad, het gaat hier om de "stock browser" van de S3 telefoon's, en waarschijnlijk ook andere stock browsers dus. Als je Chrome of dergelijke download dan werkt het inderdaad prima, alleen op de stock browsers niet dus.

Even druk gehad, maar ik zal de code (niet door mij gemaakt overigens) straks plaatsen! (ik zal deze post bewerken in plaats van opnieuw reageren).

Hieronder vind je de code, wel een behoorlijke hoeveelheid dus als het te veel word plaats ik het even extern 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="tile t-rgt rgt tile-big-x tile-wide-y bg-darkRed relative show-small-phone hide-desktop hide-phone" data-role="tile">
  2.             <div class="image-container">
  3.                 <div class="frame">
  4.                     <div class="carousel" id="carousel-usp1">
  5.                         <div class="slide">  
  6.  
  7.                         	<?php
  8. 							echo '<div  class="ups-block">
  9.  
  10. 								<div class="usp1">
  11. 									<div class="usp-top">'.$firstLine.'</div>
  12. 									<div class="usp-bottom">'.$firstLine2.'</div>
  13. 								</div>
  14.  
  15. 								<div class="usp2">
  16. 									<div class="usp-top">'.$secondLine.'</div>
  17. 									<div class="usp-bottom">'.$secondLine2.'</div>
  18. 								</div>
  19.  
  20.   								</div>';
  21. 								?>
  22.  
  23.                             	<img src="/images/home/block-usp1.png" alt="USP1" width="100%" heigh="100%" itemprop="image" />
  24.                         </div>
  25.                         <div class="slide"> 
  26.  
  27.                         		<?php
  28. 							echo '<div  class="ups-block">
  29.  
  30. 								<div class="usp1">
  31. 									<div class="usp-top">'.$thirdline.'</div>
  32. 									<div class="usp-bottom">'.$thirdline2.'</div>
  33. 								</div>
  34.  
  35. 								<div class="usp2">
  36. 									<div class="usp-top">'.$fourthLine.'</div>
  37. 									<div class="usp-bottom">'.$fourthLine2.'</div>
  38. 								</div>
  39.  
  40.   								</div>';
  41. 								?>
  42.  
  43.                             	<img src="/images/home/block-usp2.png" alt="USP2" width="100%" heigh="100%" itemprop="image" />
  44.                         </div> 
  45.                     </div>
  46.                 </div>
  47.              </div>
  48.         </div>


En de CSS (2000 lijnen zucht...)
Plaatscode: 142485
Offline Thomas - 14/12/2015 15:22
Avatar van Thomas Moderator Met de bovenstaande code zie ik niet echt wat er visueel misgaat. In eerste instantie zie ik helemaal niets, totdat ik het scherm kleiner trek.

Ik neem aan dat het uiteindelijk gaat om de ups-block divs?
De opmaak hiervan is sowieso vreemd: deze heeft zowel een float als een absolute positie?
Geen van de bovengelegen elementen (slide (klasse bestaat niet in meegeleverde CSS), carousel, frame (klasse bestaat niet in meegeleverde CSS)) behalve het bovenste element heeft positie "relative". Ook ben ik niet bekend met de eenheid "vw", dit zal wel iets nieuws zijn?

Hier waarschijnlijk niet direct aan gerelateerd, maar de CSS-code bevat nog een aantal klasses met warnings, mogelijk wil je eerst je CSS helemaal kloppend maken.

Je hebt het over de stock browser van S3. Als daarin het eerste voorbeeld wat je plaatste al niet werkt dan zul je een andere aanpak moeten hanteren. Het laatste voorbeeld is wat mij betreft veel te uitgebreid en illustreert niet (goed) wat er misgaat. Je zult dit probleem verder moeten isoleren. En als absolute positionering zo'n probleem is, probeer het gebruik hiervan dan te vermijden.

Indien je oorspronkelijke voorbeeld al niet werkt zou ik daar nog een keer naar kijken, want ik had hier al kanttekeningen bij geplaatst dat deze volgens mij al niet helemaal klopt. Zorg eerst dat je uitgangssituatie (weer) helemaal klopt, en kijk dan pas opnieuw naar de browser waar de problemen optraden.

Het heeft geen zin om een situatie te bestuderen waarvan je weet dat deze niet klopt, maak deze eerst kloppend, en kijk dan of er nog problemen zijn.
Bedankt door: GroundZero
Offline GroundZero - 15/12/2015 07:40 (laatste wijziging 15/12/2015 07:41)
Avatar van GroundZero Lid vw is viewport width dat is meer om tekst en dergelijke responsive te maken. Dus als het scherm verkleind word dan word het lettertype ook kleiner (of het element waarop de vw/vh/overige staat).

Kan erg handig zijn, stukken makkelijker dan pixels en media queries, alhoewel het niet altijd de beste oplossing is, soms moet je toch terug vallen op de media queries 

Kan kloppen inderdaad, het is ook allemaal deels onderdeel van het "http://metroui.org.ua/" Framewerk. Een soort Microsoft Metro UI (Windows 8 - 10, de blokjes zoals we ze kennen van het start scherm).

Ik maak zelf de CSS niet maar iemand anders, en als hij er niet uit komt dan ik ook niet gezien ik weinig met CSS doe haha.

Ik denk dat we de classe inderdaad even volledig opnieuw gaan opbouwen, zoals jij in een vorige post al zij, werkt het bij jou wel prima dus dan zal de fout (doh) bij ons liggen.

Thanks voor je antwoorden so far! als ik de oplossing heb post ik deze even hier!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s