如果没有阻止图像滑块，则无法调整CSS Apple AR图标的大小

Question

我正在Shopify上的一个项目中尝试以不妨碍图像滑块正常工作的方式添加AR（增强现实）图标，这是默认情况。这样做是因为图标的div会变成包含div的图像的整个宽度，但是图标本身很小。

我尝试执行此操作的方法是将AR图标的div放置在另一个div内，并放入溢出：作为该div上的CSS属性隐藏，因此我可以在不增加点击框大小的情况下展开图标

这是我到目前为止所拥有的：

.ar-quicklook-overlay { // Div that contains the AR Icon
    width: 5000px; //For the width and height, anything past 100px doesnt seem to do anything.
    height: 5000px;
    padding-right: 4925px;
    padding-top: 25px;
    background-color: yellow;
}

.ar-container { //Container I placed everything in.
    width: 100px;
    height: 100px;
    position: absolute;
    top: -3%;
    right: 10%;
    z-index: 100;
    overflow: hidden;
}

这是现在的样子（我将背景设为黄色以说明我想要图标的大小，在Prod中不会为黄色）：

现在，这是图标的大小：

我的问题是，无论我将ar-quicklook-overlay div设置为多大，图标的大小均保持不变，如果我删除了包含div的单元，则单击框将完全覆盖图像滑块，从而无法正常工作（您基本上可以单击图像上的任何位置，它将打开AR显示屏），但是图标的大小正确。我是否缺少某种方式允许图标占用正确的空间，而只包含在黄色框内？

请注意，我无法控制图标本身。它由Shopify上的AR App脚本自动生成。