Test CSS Page<\/title>\r\n \r\n <style>\r\n html {\r\n font-size:16px;\r\n }\r\n body {\r\n font-size:16px;\r\n }\r\n .measureDiv {\r\n width: 200px;\r\n height: 50px;\r\n background-color: #FF0000;\r\n }\r\n .containerDiv {\r\n width: 200px;\r\n background-color: #8888FF;\r\n }\r\n .font16 {\r\n font-size: 16px;\r\n }\r\n .font24 {\r\n font-size: 24px;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div class=\"containerDiv\"><span>Here is some text for testing.<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n <div class=\"containerDiv\"><span class=\"font16\">Here is some text for testing. font16<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n <div class=\"containerDiv\"><span class=\"font24\">Here is some text for testing. font24<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n <div class=\"containerDiv\"><span style=\"font-size:2em\">Here is some text for testing. 2em<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n <div class=\"containerDiv\"><span style=\"font-size:200%\">Here is some text for testing. 200%<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n<p>The suggestions from <a href=\"https:\/\/stackoverflow.com\/questions\/11289166\/chrome-on-android-resizes-font\">this page<\/a> didn’t seem to work. The main suggestion from this page is to set <code>max-height<\/code> or <code>min-height<\/code> parameters to very large or very small values (e.g., 999999px or 1px, respectively) as a way to short circuit the font boosting.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n .stdTxt {\r\n width: 100%;\r\n height: auto;\r\n min-height: 1px;\r\n max-height: 999999px;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div class=\"containerDiv\"><span class=\"stdTxt\">Here is some text for testing.<\/span><\/div>\r\n <div class=\"measureDiv\"><\/div>\r\n<\/pre>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-size-adjust\">This suggestion<\/a> didn’t appear to work, either. The remote debugger shows the 16px font size and the -webkit-text-size-adjust lines are properly in effect.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n html,body,* {\r\n font-size:16px;\r\n text-size-adjust: none;\r\n -webkit-text-size-adjust: none;\r\n -moz-text-size-adjust: none;\r\n -ms-text-size-adjust: none;\r\n }\r\n<\/pre>\n<p>I considered writing some JavaScript to test for Android and then apply a multiplier to make the relevant text items smaller, but a review of the sizing commands I use show that any type of multiplier I might use would tend to be inconsistent. It would merely override whatever multiplier was already in place. The workaround for that would be to set the relative text size of every text element using an individual <code>font-size<\/code> command, and then apply a universal multiplier in <code>em<\/code> or percent to do a universal scaling. That would work, but seems to represent a nuclear option. I’d really like to find a better solution. (An even more nuclear option, fusion instead of fission, perhaps, is to punt the opening animation altogether.)<\/p>\n<p>Another thing that confuses this whole effort is the fact that users can set the default size of text larger or smaller than the standard, which would probably obviate this whole discussion anyway. Hmm, maybe the nuclear option <strong>is<\/strong> the way to go. This is particularly true in light of the fact that I’ve been thinking of redoing the landing page into more of a copywritten story format, rather than being mostly a rehash of the Roles page. We shall see.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Digging into yesterday’s problem more I found references to a procedure called font boosting, and a number of ways to potentially control it or turn it off. Font boosting has to do with making the text larger by default on … <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2018\/01\/30\/cross-browser-compatibility-my-website-animation-part-2\/\">Continue reading <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[87,137,151,150],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1974"}],"version-history":[{"count":1,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974\/revisions\/1975"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1974,"date":"2018-01-30T23:39:14","date_gmt":"2018-01-31T04:39:14","guid":{"rendered":"https:\/\/rpchurchill.com\/wordpress\/?p=1974"},"modified":"2018-02-01T02:10:43","modified_gmt":"2018-02-01T07:10:43","slug":"cross-browser-compatibility-my-website-animation-part-2","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2018\/01\/30\/cross-browser-compatibility-my-website-animation-part-2\/","title":{"rendered":"Cross-Browser Compatibility: My Website Animation, Part 2"},"content":{"rendered":"

Digging into yesterday’s<\/a> problem more I found references to a procedure called font boosting<\/em>, and a number of ways to potentially control it or turn it off. Font boosting has to do with making the text larger by default on certain mobile devices in certain situations.<\/p>\n

I put together a simple test page I could use to easily see the effects of different changes and clearly verify which CSS was in effect.<\/p>\n

\r\n\r\n\r\n  \r\n    \r\n    \r\n    \r\n    \r\n    Test CSS Page<\/title>\r\n    \r\n    <style>\r\n      html {\r\n        font-size:16px;\r\n      }\r\n      body {\r\n        font-size:16px;\r\n      }\r\n      .measureDiv {\r\n        width: 200px;\r\n        height: 50px;\r\n        background-color: #FF0000;\r\n      }\r\n      .containerDiv {\r\n        width: 200px;\r\n        background-color: #8888FF;\r\n      }\r\n      .font16 {\r\n        font-size: 16px;\r\n      }\r\n      .font24 {\r\n        font-size: 24px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"containerDiv\"><span>Here is some text for testing.<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n    <div class=\"containerDiv\"><span class=\"font16\">Here is some text for testing. font16<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n    <div class=\"containerDiv\"><span class=\"font24\">Here is some text for testing. font24<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n    <div class=\"containerDiv\"><span style=\"font-size:2em\">Here is some text for testing. 2em<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n    <div class=\"containerDiv\"><span style=\"font-size:200%\">Here is some text for testing. 200%<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n<p>The suggestions from <a href=\"https:\/\/stackoverflow.com\/questions\/11289166\/chrome-on-android-resizes-font\">this page<\/a> didn’t seem to work.  The main suggestion from this page is to set <code>max-height<\/code> or <code>min-height<\/code> parameters to very large or very small values (e.g., 999999px or 1px, respectively) as a way to short circuit the font boosting.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      .stdTxt {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 1px;\r\n        max-height: 999999px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"containerDiv\"><span class=\"stdTxt\">Here is some text for testing.<\/span><\/div>\r\n    <div class=\"measureDiv\"><\/div>\r\n<\/pre>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-size-adjust\">This suggestion<\/a> didn’t appear to work, either.  The remote debugger shows the 16px font size and the -webkit-text-size-adjust lines are properly in effect.<\/p>\n<pre class=\"toolbar-overlay:false wrap:false height-set:true lang:default decode:true \">\r\n      html,body,* {\r\n        font-size:16px;\r\n        text-size-adjust: none;\r\n        -webkit-text-size-adjust: none;\r\n        -moz-text-size-adjust: none;\r\n        -ms-text-size-adjust: none;\r\n      }\r\n<\/pre>\n<p>I considered writing some JavaScript to test for Android and then apply a multiplier to make the relevant text items smaller, but a review of the sizing commands I use show that any type of multiplier I might use would tend to be inconsistent.  It would merely override whatever multiplier was already in place.  The workaround for that would be to set the relative text size of every text element using an individual <code>font-size<\/code> command, and then apply a universal multiplier in <code>em<\/code> or percent to do a universal scaling.  That would work, but seems to represent a nuclear option.  I’d really like to find a better solution.  (An even more nuclear option, fusion instead of fission, perhaps, is to punt the opening animation altogether.)<\/p>\n<p>Another thing that confuses this whole effort is the fact that users can set the default size of text larger or smaller than the standard, which would probably obviate this whole discussion anyway.  Hmm, maybe the nuclear option <strong>is<\/strong> the way to go.  This is particularly true in light of the fact that I’ve been thinking of redoing the landing page into more of a copywritten story format, rather than being mostly a rehash of the Roles page.  We shall see.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Digging into yesterday’s problem more I found references to a procedure called font boosting, and a number of ways to potentially control it or turn it off. Font boosting has to do with making the text larger by default on … <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2018\/01\/30\/cross-browser-compatibility-my-website-animation-part-2\/\">Continue reading <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[87,137,151,150],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1974"}],"version-history":[{"count":1,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1974\/revisions\/1975"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}