Autor Zpráva
radekt
Profil
Android Browser 4.1.2. a FlexBox

Dobrý den,
stránky Římské legie (zkušební web), rozvržené pomocí Flexboxu mají špatné pořadí identifikátorů. Cílem je, aby - oproti pořadí v kódu - záhlaví bylo vizuálně první, navigace druhá a obsah třetí.
html a CSS (zestručněno pro názornost):

<style type="text/css" media="screen">
#page {
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  display: -webkit-box;
  display: -webkit-flex;
  /* Internet Explorer 10, Internet Explorer Mobile */
  display: -ms-flexbox;
  /* staré verze Firefoxu */
  display: -moz-box;
  /* W3C 2009 */
  display: box;
  /* W3C 2011 */
  display: flexbox;
  /* W3C 2012 */
  display: flex;
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  /* Internet Explorer 10, Internet Explorer Mobile */
  -ms-flex-direction: column;
  /* staré verze Firefoxu */
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  /* W3C 2009 */
  box-orient: vertical;
  /* W3C 2012 */
  flex-direction: column;
}

#header {
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  -webkit-box-ordinal-group: 1;
  -webkit-order: 1;
  /* Internet Explorer 10, Internet Explorer Mobile */
  -ms-flex-order: 1;
  /* staré verze Firefoxu */
  -moz-box-ordinal-group: 1;
  /* W3C 2009 */
  box-ordinal-group: 1;
  /* W3C 2012 */
  order: 1;
}

#nav {
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  -webkit-box-ordinal-group: 2;
  -webkit-order: 2;
  /* Internet Explorer 10, Internet Explorer Mobile */
  -ms-flex-order: 2;
  /* staré verze Firefoxu */
  -moz-box-ordinal-group: 2;
  /* W3C 2009 */
  box-ordinal-group: 2;
  /* W3C 2012 */
  order: 2;
}

#article {
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  -webkit-box-ordinal-group: 3;
  -webkit-order: 3;
  /* Internet Explorer 10, Internet Explorer Mobile */
  -ms-flex-order: 3;
  /* staré verze Firefoxu */
  -moz-box-ordinal-group: 3;
  /* W3C 2009 */
  box-ordinal-group: 3;
  /* W3C 2012 */
  order: 3;
}
</style>

<div id="page">
  <a href="#"><div id="header" role="banner">Záhlaví</div></a>
  <div id="article" role="article">Obsah</div>
  <div id="nav" role="navigation">Navigace</div>
</div>

Na OS Android 4.1.2. i na Chrome pro Android bylo špatné pořadí, po updatu Chrome pro Android se v Chromu pro Android stránky zobrazují správně. Viz screenshot, vlevo je Android Browser, vpravo Chrome. V Android Browseru je místo záhlaví prázdné místo, pak navigace a pod ní teprve záhlaví:


Jediné, na co jsem přišel je, že když se zruší obalení identifikátoru #header odkazem, tak se to v Android Browseru chová dobře. Věděl by někdo, jak donutit Android Browser dělat dobrotu?
Děkuji
radekt
Profil
Zřejmě jsem na to přišel - když FlexBoxem neřadím identifikátor, ale odkaz, který identifikátor obaluje a ten odkaz přetypuji na blokový prvek, chová se to tak, jak má.

/* Na rozdíl od ostatních prohlížečů Android Browser 4.1.2. nedá #header na začátek, ale až za #nav. 
Proto je třeba ve FlexBoxu místo #header určit pořadí jemu nadřízenému odkazu (jenom přímému 
potomkovi #page, aby to neplatilo pro všechny odkazy) a přetypovat tento odkaz na blokový prvek. */

#page > a {
  display: block;
  /* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
  -webkit-box-ordinal-group: 1;
  -webkit-order: 1;
  /* Internet Explorer 10, Internet Explorer Mobile */
  -ms-flex-order: 1;
  /* staré verze Firefoxu */
  -moz-box-ordinal-group: 1;
  /* W3C 2009 */
  box-ordinal-group: 1;
  /* W3C 2012 */
  order: 1;
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: