Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Totally agree that this is a bug as already answered by @Yahreen.</p> <p>I noticed that whilst I had this problem with a site I was working on that some pages seemed to work better than others. So I spent some time to try and work out why this was and if any sort of "workaround" could be used in the meantime.</p> <p>I personally had problems getting Webfonts to render correctly on Chrome in Android - Nexus S and Nexus 7. </p> <p>I've found that if you play with the width of your elements it appears to be possible to workaround the bug to some extent and still get web fonts under 18px to render correctly.</p> <p>In the sample code attached it seems everything works on a max width of 88.8%. You can have a wider first DIV but then it breaks the ones underneath. Everything only seems to work at that magic percentage. It might be an ok workaround for some people. Your mileage may vary and you may need to play with the percentages - I needed to tweak the percentage up slightly in a responsive layout (gridpak) but I suspect it probably still conforms to the same sort of logic in overall percentage terms. After all the behaviour of this bug is strange but this does seem to sort of stabilise it into some usable pattern and maybe this helps you out.</p> <p>Somebody else might understand a bit deeper what is at play here and maybe offer some more advice/explanation.</p> <p>You can see the test here: <a href="http://richhollis.github.com/grumpy-wizard-font-test/" rel="nofollow">http://richhollis.github.com/grumpy-wizard-font-test/</a></p> <pre><code>&lt;!DOCTYPE&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;Grumpy Wizards&lt;/title&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'&gt; &lt;style&gt; body { font-family: 'Finger Paint', cursive; } &lt;/style&gt; &lt;/head&gt; &lt;body style="margin:0; padding:0; background-image: url('http://www.thezorklibrary.com/history/image/grumpy_wizard1a.png')"&gt; &lt;div style="width: 88.8%; background: red; opacity: 0.8"&gt; &lt;h1&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h1&gt; &lt;h2&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h2&gt; &lt;p&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:18px"&gt;18px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:17px"&gt;17px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;/div&gt; &lt;div style="width: 88.8%; background: yellow; opacity: 0.8"&gt; &lt;h1&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h1&gt; &lt;h2&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h2&gt; &lt;p&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:18px"&gt;18px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:17px"&gt;17px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;/div&gt; &lt;div style="width: 88.8%; background: purple; opacity: 0.8"&gt; &lt;h1&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h1&gt; &lt;h2&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/h2&gt; &lt;p&gt;Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:18px"&gt;18px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;p style="font-size:17px"&gt;17px Grumpy wizards make toxic brew for the evil Queen and Jack&lt;/p&gt; &lt;/div&gt; &lt;div id="size"&gt;&lt;/div&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt; &lt;script&gt;$(function(){ $("#size").text("window.innerWidth = " + window.innerWidth); });&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PO@font-face rendering issue on paragraph tag, Chrome Android 4
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRichard Hollis
    1. USRichard Hollis
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload