search

brstp / friskissvettis-mobil

Friskis&Svettis hybridmobilapp
http://m.friskissvettis.se
0 stars 0 forks source link

Länkar / dropdown skyms av slider #20

Closed brstp closed 10 years ago

brstp commented 10 years ago

Kollar m.friskissvettis.se på ipad med Chrome och Safari. Syfte är att kolla om designen funkar på den skärmbredden eller om det är läge att sätta en max-width.

Upptäcker att Safari och Chrome på samma iPad renderar sidorna väldigt olika. I Chrome hamnar dropdown och länkar på startsidan under slidern. De skymtar till vid övergång mellan bilder. Oanvändbart.

2014-10-06 10 13 12

2014-10-06 10 13 35

aponomy commented 10 years ago

Det är ju fruktansvärt. Jag gillar inte Google. Återkommer om detta.

brstp commented 10 years ago

Jag ser fler saker som ser konstiga ut i mobilwebben. Jag försöker förstå om det är ett eller flera problem. Kommer fler felbeskrivningar.

Stefan Pettersson <0733-12 55 55>

Lumano Konsult inom användbarhet, sökbarhet och projektledning för webb och intranät.

Allom Evenemangskalendern med allt som händer innan det är för sent.

2014-10-06 10:56 GMT+02:00 Klas notifications@github.com:

Det är ju fruktansvärt. Jag gillar inte Google. Återkommer om detta.

— Reply to this email directly or view it on GitHub https://github.com/brstp/friskissvettis-mobil/issues/20#issuecomment-57990176 .

brstp commented 10 years ago

I sidfoten på iPad/Chrome så hamnar facebookloggan fel

2014-10-06 11 24 37

aponomy commented 10 years ago

Har du någon statistik på hur många som använder Chrome på iPad för m.friskis?

brstp commented 10 years ago

1,42% av det totala antalet besök hos F&S Södertälje. (Ungefär lika stor andel som Chrome på Galaxy S5).

Jag blir förvånad, tycker att Chrome brukar bete sig vettigt. Vi har inte kvar något gammalt villkor som kollar på user agent, blir förvirrad och gör något dumt?

Stefan Pettersson <0733-12 55 55>

Lumano Konsult inom användbarhet, sökbarhet och projektledning för webb och intranät.

Allom Evenemangskalendern med allt som händer innan det är för sent.

2014-10-06 11:29 GMT+02:00 Klas notifications@github.com:

Har du någon statistik på hur många som använder Chrome på iPad för m.friskis?

— Reply to this email directly or view it on GitHub https://github.com/brstp/friskissvettis-mobil/issues/20#issuecomment-57993384 .

brstp commented 10 years ago

Jag testar att i Chrome/iPad välja "Request Desktop Site" och får helt olika design på mobilwebben.

Om jag förstått det rätt så skickar webbläsaren då en annan user-agent-sträng men uppger oförändrade skärmmått.

http://stackoverflow.com/questions/11702453/how-does-chromes-request-desktop-site-option-work

Har vi något kvar som ger olika css baserat på user agent?

Innan jag begärde "desktop site":

2014-10-06 12 04 55

Efter att jag begärde "desktop site": 2014-10-06 12 05 03

aponomy commented 10 years ago

Nej det finns ingenting som känner av user-agent längre, detta är något som Chrome åstadkommer helt på egen hand i renderingen. Obehagligt.

brstp commented 10 years ago

Efter lunch ska jag göra lite research om detta. Vill kolla hur det ser ut på Chrome/iPhone. Pausa så länge. Känns som något som jag hellre krånglar mig ur med hänvisning till udda browserbeteende än lägger utvecklingstid på.

aponomy commented 10 years ago

Det låter bra.

brstp commented 10 years ago

FYI: Jag läste in mig lite på området. Har inte haft koll på läget.

Chrome for iOS använder UIWebView som renderingsmotor. Den är inkluderad i iOS och alla webbläsarappar på iOS (förutom Safari) är hänvisade till att använda den. T.ex. när facebookappen eller twitterappen öppnar en webbsida. UIWebView är baserad på Webkit. Det är alltså version av iOS som avgör hur sidorna renderas, inte version av Chrome. Safaris renderingsmotor är också baserad på Webkit men anses snabbare.

Chrome for iOS använder UIWebView som javascriptmotor medan Safari har en egen ("Nitro"). Enligt rykten så skulle Nitro öppnas för andra appar/browsers än Apples egna i iOS 8 men jag hittar inte något som styrker det nu efter release.

Safaris använder flera processorkärnor medan UIWebView bara använder en. Särskilt vid skrollning märks det. Om jag förstått det rätt så kan inte javascript exekveras under tiden sidan skrollas (osäker på om jag tolkat rätt).

Stefan Pettersson <0733-12 55 55>

Lumano Konsult inom användbarhet, sökbarhet och projektledning för webb och intranät.

Allom Evenemangskalendern med allt som händer innan det är för sent.

2014-10-06 12:50 GMT+02:00 Klas notifications@github.com:

Det låter bra.

— Reply to this email directly or view it on GitHub https://github.com/brstp/friskissvettis-mobil/issues/20#issuecomment-58001166 .

brstp commented 10 years ago

TROR ATT JAG HITTAT EN LEDTRÅD

Jag kunde inte släppa det där med att Chrome på iOS blev så eländigt fult. Det må vara en liten andel användare som använder kombinationen, men det är min favoritkombo.

Jag upptäckte att Facebookappens webbläsare fixar sidan riktigt snyggt och fint. Lite märkligt eftersom Chrome och Facebook använder exakt samma renderings- och javascriptmotorer på iOS.

Useragents (Chrome, Facebook, och som referens Safari) som visar att AppleWebKit/537.51.2 an vänds:

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/37.0.2062.60 Mobile/11D257 Safari/9537.53 (000020)

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 [FBAN/FBIOS;FBAV/15.0.0.16.28;FBBV/4463064;FBDV/iPad3,6;FBMD/iPad;FBSN/iPhone OS;FBSV/7.1.2;FBSS/2; FBCR/Three;FBID/tablet;FBLC/en_US;FBOP/1]

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53

Min hypotes blir att det är något annat än renderingsmotorn som är problemet. I princip så är det ju bara filhämtning och rendering som behövs (resten är nice lullull). Så det måste vara något med filhämtning tänker jag.

Jag provar att ladda ned startsidan och anger olika useragents för att verifiera att samma kod laddas ned från webbservern. Check. Identisk.

Jag provar att ladda ned en statisk kopia av startsidan till en webbserver mha en offline browser där jag byter ut alla href som pekar mot m.friskissvettis.se att istället peka på en lokal kopia.

Provkör lokalt.

FUNKAR FINT!

Jag fattar inte vad som är skillnaden. Hinner inte kolla just nu. Har du någon idé?

Uppslag:

Min statiska version som funkar finfint i Chrome på iOS när jag kör den på en Apache (defaultkonfad på Ubuntu): https://dl.dropboxusercontent.com/u/10076106/friskis-svettis/m.friskissvettis.se/fs-working-locally.tgz

aponomy commented 10 years ago

Fantastisk research.

Bara lite kort (från bussen), jag läste någonstans att chrome för iPad måste ha kommatecken i viewport-taggen och inte tömmer cache ordentligt förrän man avinstallerar och installerar igen, jag har ändrat viewport, tror du att du har möjligt och installera om för att se om det funkar?

Klas

On 07 Oct 2014, at 12:11, Stefan Pettersson notifications@github.com wrote:

TROR ATT JAG HITTAT EN LEDTRÅD

Jag kunde inte släppa det där med att Chrome på iOS blev så eländigt fult. Det må vara en liten andel användare som använder kombinationen, men det är min favoritkombo.

Jag upptäckte att Facebookappens webbläsare fixar sidan riktigt snyggt och fint. Lite märkligt eftersom Chrome och Facebook använder exakt samma renderings- och javascriptmotorer på iOS.

Useragents (Chrome, Facebook, och som referens Safari) som visar att AppleWebKit/537.51.2 an vänds:

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/37.0.2062.60 Mobile/11D257 Safari/9537.53 (000020)

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 [FBAN/FBIOS;FBAV/15.0.0.16.28;FBBV/4463064;FBDV/iPad3,6;FBMD/iPad;FBSN/iPhone OS;FBSV/7.1.2;FBSS/2; FBCR/Three;FBID/tablet;FBLC/en_US;FBOP/1]

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53

Min hypotes blir att det är något annat än renderingsmotorn som är problemet. I princip så är det ju bara filhämtning och rendering som behövs (resten är nice lullull). Så det måste vara något med filhämtning tänker jag.

Jag provar att ladda ned startsidan och anger olika useragents för att verifiera att samma kod laddas ned från webbservern. Check. Identisk.

Jag provar att ladda ned en statisk kopia av startsidan till en webbserver mha en offline browser där jag byter ut alla href som pekar mot m.friskissvettis.se att istället peka på en lokal kopia.

Provkör lokalt.

FUNKAR FINT!

Jag fattar inte vad som är skillnaden. Hinner inte kolla just nu. Har du någon idé?

Uppslag:

Felaktig mime type på någon ingående js eller css i din utvecklingsmiljö? Felaktig kodning (utf-8 vs iso-8859-1 vs ...) på någon fil. Klarar inte Chrome av filnamnen som innehåller parametrar? Klarar inte Chrome av filnamn av typen aspx som levererar css? ... Min statiska version som funkar finfint i Chrome på iOS när jag kör den på en Apache (defaultkonfad på Ubuntu): https://dl.dropboxusercontent.com/u/10076106/friskis-svettis/m.friskissvettis.se/fs-working-locally.tgz

— Reply to this email directly or view it on GitHub.

brstp commented 10 years ago

Funkar utmärkt nu. Case closed.

Installerade om. Har läst flera olika artiklar om cachningen och upplevt att man tömmer cachen om man dödar chrome-processen. Har sett att det funkat med både css och html men det behöver ju inte betyda att det alltid funkar i alla lägen.