Edge browser: Button Background on product page only shows after initial hover

  • Resolved nopewhy

    (@nopewhy)


    5 years, 9 months ago

    Hi everyone,

    I might have found a Bug in the most recent version of Storefront.
    When you open a product page in Microsoft’s Edge browser (try it with this: https://themes.woocommerce.com/storefront/product/standard-colander/) a button with white font on any other background will not be shown (it’s there but you only see it in the html or when selecting all text on page) until after you hover above the button at least once.
    Then the button’s background color will finally be shown, so that one can read the text on it.
    I guess it’s only a problem when you’re using white or any other light font. Firefox and Chrome seem to be fine, it’s just Edge.
    Unfortunately I cannot test it on any other computer right now, maybe one of you could try to reproduce the bug?
    I’d file a bug report over there at https://github.com/woocommerce/storefront, but before I do that I need to know that it’s not only my pc behaving weirdly. Also I’m not sure about the etiquette here, when to talk about a problem only here on support and when to move it over to git.

    Any hints how to proceed (and even fixes for this problem, if anyone happens to find the source of it) would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter nopewhy

    (@nopewhy)

    I forgot to specify which button I’m talking about. Strangely only the “add to cart” button next to the price seems to be affected. The small “add to cart” buttons in the “related products” section seem to work fine.

    Hi @nopewhy,

    Thanks for reporting this here and worrying about etiquette. Normally any suspected bugs would be welcomed via GitHub, but any avenue that helps you report it we will take! ??

    Nonetheless, onto the suspected bug here. At the moment I’m not able to replicate it. I’m using Browserstack to use Edge, and I’ve tested two different sites using Storefront. Here is what I see on all Add to Cart or buttons with white text.


    Link to image: https://cld.wthms.co/ubAuIe


    Link to image: https://cld.wthms.co/XN3iMF

    Would you be able to replicate this still and if so send screenshots here? It may seem like initially it could only be your browser acting up, and maybe there is an explanation for that.

    Thread Starter nopewhy

    (@nopewhy)

    Hi @ryanr14,

    thank you so much for your kind reply and taking the time to try to reproduce the bug.
    I can still reproduce it, but I guess there’s no reason to do it, as neither you nor two friends of mine could reproduce the problem. It seems that my completely untouched Edge (I never use it besides for testing websites on it, so zero modifications) is kind of wonky and produces the weirdest glitch.

    I guess I’ll mark this one as solved then.

    I have exactly the same problem.
    The add to cart button only shows after you have focused or hovered over it in Microsoft Edge. So this issue is far from solved.
    I do not think using browser stack is a solution to showing of the problem exists.
    You need to go to a site with the problem on it.
    https://africaetrade.ng/product/1m-2m-3m-usb-charge-cable-for-iphone-7-8-plus-x-xs-max-xr-fast-charging-usb-data-cable-for-iphone-5-5s-se-6-6s-plus-charger-wire/ The button should be next to the quantity, but it only shows once hovered on.
    The proceed to cart button also sometimes seems to show or not show until hovered over.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Edge browser: Button Background on product page only shows after initial hover’ is closed to new replies.