【问题标题】：WooCommerce Single product image hover Zoom blinkingWooCommerce 单个产品图像悬停缩放闪烁
【发布时间】：2019-06-06 13:22:48
【问题描述】：
我在我的网站上安装了 WooCommerce 附加变体图像，但我失去了缩放，但是我找到了一个解决方案，并在 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' );
}
一旦我更改为不同的图像，悬停缩放仅适用于一个选定的图像，然后我会得到意想不到的缩放，比如闪烁。
如果有人有任何解决方案，请帮助我。
这是产品链接：https://www.fitspare.com/product/dymatize-elite-100-whey-protein-5-lbs/
【问题讨论】：
标签：
javascript
php
wordpress
plugins
woocommerce
【解决方案1】：
我知道这是一个老问题，但我今天遇到了同样的问题并且没有在任何地方找到任何帮助，所以我认为这可以帮助某人。
我尝试禁用所有插件，但问题仍然存在。然后我改变了主题，缩放/放大工作正常。由于我使用的是子主题，我首先禁用了子主题以查看问题是在子主题还是父主题中，并发现父主题与 woocommerce 缩放功能冲突。
我已尝试将所有 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 {transition: none;}
选项 2 - 这只会禁用具有类 zoomImg 的图像的过渡：
img.zoomImg {transition: none;}