transform和绝对定位中left、right以及font-size: 0的问题

Question

问题描述

在实际开发H5中，有俩张图片，每张图片内都需要有一个点击按钮。
实现方式：

<div class='father'>
    <div class='child'>
        <img src='xxx.png' class='img1'>
        <span class='xxx-btn'></span>
    </div>
    <div class='child'>
        <img src='yyy.png' class='img1'>
        <span class='yyy-btn1'></span>
        <span class='yyy-btn2'></span>
    </div>
</div>
// child设置相对定位,span设置绝对定位
// 由于存在幽灵空白符的BUG，需要对`father`使用font-size: 0进行清除间距。

问题来了...

在yyy-btn1设置的定位中我使用 left： xx% top: xx%进行设置后，然后在yyy-btn2设置 transform: translateX(xx%)。 无论怎么调比例问题，yyy-btn1与yyy-btn2会出现间隔。
但是：
yyy-btn2丢弃transform而使用left,top时UI样式却又正确了。

问题猜测

难道是transform的计算方式存在问题？？还是transform与left本身存在BUG？？