[Webkit-unassigned] [Bug 170285] New: iOS 10.3/Safari 10.1 css background-image in style attribute ignored when using createHTMLDocument method of DOM parsing

Thu Mar 30 07:55:01 PDT 2017

https://bugs.webkit.org/show_bug.cgi?id=170285

            Bug ID: 170285
           Summary: iOS 10.3/Safari 10.1 css background-image in style
                    attribute ignored when using createHTMLDocument method
                    of DOM parsing
           Product: WebKit
           Version: Safari 10
          Hardware: All
                OS: iOS 10
            Status: NEW
          Severity: Blocker
          Priority: P2
         Component: HTML DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: martijn+webkitbbug at wirelab.nl
                CC: cdumez at apple.com

Created attachment 305861

  --> https://bugs.webkit.org/attachment.cgi?id=305861&action=review

Simplified proof of concept of the issue.

When parsing a HTML string to DOM elements using DOMImplementation::createHTMLDocument background-images no longer get processed when assigned with inline style attributes. This issue did not exist before iOS 10.3 and/or macOS 10.12.4.

Simple proof of concept:
<!DOCTYPE html>
<html>
  <head>
    <title>iOS 10.3 / macOS Safari 10.1 - Background image bug POC</title>
    <style type="text/css">div { width: 10vw; height: 10vh; background-size: cover; }</style>
  </head>
  <body>
    <script>
      var htmlText = '<div style="background-image: url(image.png)"></div>';
      var domdoc = document.implementation.createHTMLDocument('template');
      domdoc.documentElement.innerHTML = htmlText;
      data = domdoc.body.children;
      for (var i = 0; i < data.length; i++) document.body.appendChild(data[i]);
    </script>
  </body>
</html>

Details to the proof of concept:
* The url given in the background-image style property must be a relative or absolute path, NOT a full url.
* The issue occurs on the latest macOS 10.12.4 update for Safari as well as iOS 10.3 Safari.
* When above code is run and network log is inspected you will notice that the image will never get requested.
* When using the webinspector, toggling the background-image style off and back on, the image will be loaded and displayed.
* A workaround at the moment can be found in running a javascript that does: "image.src = image.src", this will result in the image being loaded and displayed.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170330/1738ffdd/attachment.html>