Autor Zpráva
radekt
Profil
Ahoj,
v nativním prohlížeči Androidu AOSP 4.3 mi nefunguje formulář na této adrese. Jednak se u polí typu select nezobrazují zobáčky, jednak i když po kliknutí se nabídnou hodnoty k vyplnění, po zvolení jakékoli z nich zůstane pole select prázdné. Na Chrome pro Android a Firefoxu pro Android vše funguje bez problémů. Nevíte někdo, v čem by mohl být zakopaný pes?

Děkuji
Radek Tůma
radekt
Profil
Už jsem částečně přišel na řešení. Dočetl jsem se, že jde o chybu AOSP - jakmile je tam border a background, tak se to takhle pokazí. Pokusil jsem se to vyřešit pomocí @supports:

@supports ((display:-webkit-box)or(display:-webkit-flex)or(display:-moz-box)or(display:-ms-flexbox)or(display:flex)) {
    form {
        background: #f6fafb;
        /* odstranění bílých znaků mezi elementy */
        font-size: 0
    }
    form input[type=text],
    form select {
        background: #f9f9f9;
        border: 1px solid #888
    }
    form input[type=text]:hover,
    form select:hover,
    form textarea:hover {
        background: #cedddf
    }
    form textarea {
        background: #f9f9f9;
        border: 1px solid #888
    }
}

Na AOSP to už funguje, ale ten nepěkný ořezaný vzhled se přenáší i do Chrome a Firefoxu (mobilní i desktop). Přitom ty @supports i flexbox podporují - proč si ten styl nevezmou? Na těch mobilních to tak nevadí, ale na desktopech je to nehezké. Jelikož si nemůžu dovolit laborovat na ostrých stránkách zákazníka, mám to teď zde.
radekt
Profil
Vyřešeno, chyba je v závorkách navíc, vygenerovaných preprocesorem. Takhle:
@supports (display: -webkit-box) or
          (display: -webkit-flex) or
          (display: -moz-box) or
          (display: -ms-flexbox) or
          (display: flex) {
...
}          

to funguje.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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