My CSS includes the following:
.flag
{
background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg');
width: calc(4 * 5.93px);
height: calc(4 * 3.99px);
background-size: calc(4 * 35.08px) calc(4 * 49.63px);
cursor:pointer;
}
.flag.portugal
{
float: left;
background-position: calc(4 * -14.62px) calc(4 * -30.42px);
}
.flag.reinoUnido
{
float: right;
background-position: calc(4 * -21.40px) calc(4 * -40.22px);
}
Accompanied by the corresponding HTML:
<div class="flag contentor">
<div class="flag portugal" onclick="$('.lang').removeClass('mostra');$('.lang.portugal').addClass('mostra');"></div>
<div class="flag reinoUnido" onclick="$('.lang').removeClass('mostra');$('.lang.reinoUnido').addClass('mostra');"></div>
</div>
While this works flawlessly on my laptop, my android tablet only displays two white squares.
Could it be an issue with how I am positioning the background? Or perhaps a browser incompatibility with the tablet?
The image I am using can be found here:
https://i.sstatic.net/YLTDm.jpg
What I intend to display in the divs are the flags of Portugal and the United Kingdom as shown in this example:
https://i.sstatic.net/cNeyT.png
Is there a polyfill or shim available that could help me rectify this issue?