Using CSS properties for transform I can scale items across all browsers. For example, given the HTML <div class="scaled">scaled text</div> and the CSS .scaled { transform:scale(2.0,2.0); -webkit-transform:scale(2.0,2.0); } I can enlarge the text in that div 2x. This works on Chrome and Safari on desktop and iOS (using -ms-transform gets it on IE).
However, for some reason, when I apply this scaling to the Facebook "Like" button, the scaling doesn't work on iOS webkit browsers (e.g. Safari, Chrome). It does work on desktop Safari and Chrome, however, and the same properties applied to text works on both desktop and mobile browsers.
What's going on? Why won't the Like button scale on iOS even though everything else does? Example code is below. You can see it on the web here.
<!DOCTYPE html>
<html>
<head>
<style>
.scaled { -webkit-transform: scale(2.0, 2.0); transform: scale(2.0, 2.0); }
.box { margin: 0 auto; width: 100px; margin-bottom: 50px; }
#container { width: 300px; margin: 0 auto; text-align: center; }
</style>
</head>
<body>
<div id="container">
<div class="box">not scaled</div>
<div class="scaled box">scaled 2.0</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=1604164706533585";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like scaled" data-href="http://codepen.io/" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
</body>
</html>