Javascript WooCommerce单一产品图像悬停缩放闪烁

我在我的网站上安装了WooCommerce附加变体图像，我失去了hove缩放功能，但是我找到了一个解决方案，并在function.php中添加了下面的代码

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

悬停缩放只适用于一张选定的图像，一旦我换成不同的，我就会得到意想不到的缩放效果，比如闪电

如果有人有任何解决办法，请帮助我。

---

这里是产品链接：

我知道这是一个老问题，但我今天遇到了同样的问题，在任何地方都没有找到任何帮助，所以我认为这可以帮助别人

我尝试禁用所有插件，但问题依然存在。然后我改变了主题，缩放/放大功能正常工作。由于我使用的是子主题，我首先禁用了子主题，以查看问题是否在子主题或父主题内，并发现父主题与缩放功能冲突

我已经试着一个接一个地将所有的javascript和css文件排出来，直到找到导致问题的样式。最后，我注意到父主题具有以下样式：

img{opacity:1；-webkit transition:opacity.5s ease；-o-transition:opacity.5s ease；transition:opacity.5s ease}

在我的儿童主题中，我通过在我的儿童主题样式表中包含以下内容，改写了该样式：

选项1（我在“img”前面添加了“body”以更加具体，并避免使用“！important”），但这将禁用所有图像上的转换：

body img{转换：无；}

选项2-这将仅禁用zoomImg类图像上的转换：

img.zoomImg{transition:none；}