Internet Explorer -selaimessa teksti valuu oikeanpuoleisen täytteen (padding-right) päälle. Jos käytetyn Source Sans Pro -fontin vaihtaa tavalliseen sans-serif-fonttiin, ongelma poistuu. Vika liittynee siis tekstin renderöintiin.
Kuva ongelmaa havainnollistamaan: http://i.imgur.com/0wRhwf2.png (Tekstikappaleisiin on lisätty punainen reunaviiva (outline), jotta ongelma näkyy selkeämmin.)
Muilla selaimilla vastaavaa ongelmaa ei esiinny ollenkaan, enkä ole tällaiseen ennen IE:lläkään törmännyt.
Päivitys klo 4.45: Kokeilin myös Open Sans -fonttia, ja sama jatkuu. Teksti valui hieman jopa elementin ulkopuolelle.
Olisi paljon helpompi vastata jos laittaisit linkin koodiin jolla tuo esiintyy kuin kuvaan.
Itsellä ei mene: https://jsfiddle.net/Lz2kq567/1/
(IE 11)
Tässä demossa ongelma toistuu: http://s.codepen.io/nettiarkku/debug/Ejdpvx (Lisäsin ympäröivälle diville sinisen reunaviivan.)
Sama demo koodeineen: http://codepen.io/nettiarkku/pen/Ejdpvx/left/?
Teksti saattaa asettua ensin oikein, mutta kun sivun päivittää, se valuu oikean reunan yli.
Grez kirjoitti:
– – Itsellä ei mene: https://jsfiddle.net/Lz2kq567/1/ – –
Ei voikaan mennä, sillä demoosi ei ole liitetty web-fonttia. (Harvalla on Source Sans Pro asennettuna.)
Lisäys: Ongelma ei toistu aivan joka kerta, kun sivun päivittää. Siksi sivun joutuu ehkä päivittämään monta kertaa nähdäkseen ongelman.
HTML5 kirjoitti:
Ei voikaan mennä, sillä demoosi ei ole liitetty web-fonttia. (Harvalla on Source Sans Pro asennettuna.)
Pitäisi kyllä olla. Katso vaikka se resources.
Silloinkin kun ongelma toistuu niin se poistuu kun sivu piirtyy uudestaan (esimerkiksi ikkunan kokoa muuttaessa).
Itse en jaksaisi asialle mitään tehdä, ellen sitten bugiraporttia Microsoftille :D
Grez kirjoitti:
Pitäisi kyllä olla. Katso vaikka se resources.
Niinpä onkin. Selain ei kuitenkaan lataa fonttia, ja syy selvisi. JSFiddlen DOM-puussa lukee näin:
<script type="text/javascript" src="//fonts.googleapis.com/css?family=Source+Sans+Pro"></script>
Palvelu siis yrittää liittää CSS-tiedostoa JS-tiedostona. Ei ihme, että ei toimi.
Kappas hienoa että JS:t ja CSS:t pitää laittaa samalla systeemillä joka ei sitten osaa 100% tunnistaa niitä.
Enpä saa IE:tä bugittamaan vaikka laittaisin sen oikeinkin
https://jsfiddle.net/Lz2kq567/5/show
Toisaalta jos otan tuon sinun esimerkkisivun ja latailen ctrl+f5 niin sain ehkä noin yhden kerran sadasta bugittamaan sen noin päin kuin kuvakaappauksessasi ja ehkä tuplamäärä tuli päinvastaisia bugituksia, eli joissa jäi tuplamäärä tilaa.
Grez kirjoitti:
Toisaalta jos otan tuon sinun esimerkkisivun ja latailen ctrl+f5 niin sain ehkä noin yhden kerran sadasta bugittamaan sen noin päin kuin kuvakaappauksessasi ja ehkä tuplamäärä tuli päinvastaisia bugituksia, eli joissa jäi tuplamäärä tilaa.
Minulla bugittomien latautumisten ennätys on 7 kertaa peräkkäin. Nyt keskimäärin ehkä joka neljäs epäonnistuu. Päinvastaisen bugituksen olen nähnyt vain kerran.
Tekisi mieli olla tukematta tuota roskaselainta… Odotan ”innolla” Edgen bugeja.
Itse en kyllä muidenkaan selainten satunnaisista bugailuista välitä
Osoite, jota käytän fontin latamiseen, on seuraava:
//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic
Jos poistan ohuimman fontin, eli 300:n, IE ei enää bugita!
Haluan käyttää kuitenkin käyttää sitä sivujen otsikoissa. Nyt pitäisi keksiä, miten se onnistuu bugeitta.
Lisäys:
Näyttää siltä, että IE renderöi sivun ensin 300:n paksuisella fontilla, koska 400:n paksuinen ei ole vielä latautunut. 300 on siis fallback 400:lle.
Kun 400:n paksuinen fontti on ladattu ja se otetaan käyttöön, rivien pituus kasvaa liian suureksi, sillä 400:n paksuinen fontti vie enemmän tilaa vaakasuunnassa kuin 300:n.
Itse asiasssa 300:n paksuinen fontti äsken vilahti näytöllä ennen kuin se vaihtui 400:n paksuiseen. Siitä keksin tämän teorian.
Teknisesti voisit ladata fontit omalta palvelimelta ja vaihtaa tuon ohuemman leikkauksen nimeksi vaikka SourceSansLight.
Päivitin juuri Windows 10:een, ja näyttää siltä, ettei Edgeä vaivaa tämä IE:n ongelma. (Sääli, että Windows 10:n ulkoasu on näin ruma.)
Yllättäen vika toistuu IE:ssä nyt paljon harvemmin. Edgessä en onneksi ole sitä saanut toistumaan.
Google Fonteissa on eri alustoilla ja selaimissa ihan bugeja, joista on raportoitu. Esim. Open Sans-fontin ohuin leikkaus ei näy Win7+Chrome -kombinaatiolla, vaan leikkaus on paljon paksumpaa kuin mitä pitäisi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.
