Background is not set on mouseover with `this.style="background:url()"`.

Duplicate Issue #8884496 • See Issue #8627632

Details

Author
Victor C.
Created
Sep 13, 2016
Privacy
This issue is public.
Duplicates
See progress on Bug #8627632
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

The background is not set on mouseover with this.style="background:url()". For instance, the following does not work in Edge:
<img src="IMG1" onmouseover="this.style='background:url(IMG1)'; this.src='IMG2'" onmouseout="this.src='IMG1'">
It works fine in Firefox or Chrome. The following code works OK in Edge:
<img style="background:url('IMG1')" src="IMG1" onmouseover= "this.src='IMG2'" onmouseout="this.src='IMG1'">

Example images (copy-paste the code into codepen.io). Not working:
<img src="http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg" onmouseover="this.style='background:url("http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg")'; this.src='http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117a.gif'" onmouseout="this.src='http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg'">
Working:
<img style="background:url('http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg')" src="http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg" onmouseover= "this.src='http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117a.gif'" onmouseout="this.src='http://chechik.co.uk/Reports/2016/Scafell_Pike_2016/_MG_8117.jpg'">

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • I am curious which version of Edge you are seeing this not working with? I used the code you provided and see the same behavior in both Chrome and Edge. I haven’t tested any builds lower than 14911, though.

      All the best,
      The MS Edge Team

    • Unless we receive updates soon we will resolve this out as not repro. Please provide an update to avoid closure of the item due to inactivity.

      All the best,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

    • Apologies, I have not seen your reply. I am using Microsoft Edge 38.14393.0.0. In my original post, there were extra double quotes surrounding the background url in the non-working example which screwed up the code.

      So the “correct” non-working example is:

      When pasted in codepen.io, in Chrome, the mouseover displays a background jpg with a gif (red line) overlaid on top of it. In Edge, the background image is not loaded on mouseover.

      Thanks!
      Victor

    • Sorry, the code disappeared from the previous message. Here it is:

    • Not sure how to display the code anymore? It shows OK in Preview but is not visible after the comment has been added? Anyway, the example is at http://codepen.io/anon/pen/qaYROj

    • Microsoft Edge Team

      Changed Status from “Not reproducible”

    • Thank you for the feedback, I am able to repro in 14942.1000 of Edge (Insider fast build). We will investigate further.

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Duplicate”

    • Known issue. Duping to existing bug.

    • By the way, this is non-standards code.
      Standards say you should use this.style.cssText=string instead, which should be working cross browser.

    • }This bug has marked as duplicate. Please follow the parent issue to get new updates.

    • Francois: Many thanks for the tip - I will use the standards code which as you say works across browsers.

      Victor

    You need to sign in to your Microsoft account to add a comment.

    Sign in