[Webkit-unassigned] [Bug 243601] New: Images with loading="lazy" have uncontrollable gray border while loading

Fri Aug 5 12:41:50 PDT 2022

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

            Bug ID: 243601
           Summary: Images with loading="lazy" have uncontrollable gray
                    border while loading
           Product: WebKit
           Version: Safari 15
          Hardware: All
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Images
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: steven at ceriously.com
                CC: sabouhallawa at apple.com

Created attachment 461428

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

HTML page that reproduces the issue

Images that use native lazy loading (the feature added in #196698) show an unexpected gray border while loading.

This border disappears once the image is loaded.

The border does not seem to be controllable with CSS as seen here: https://stackoverflow.com/q/71992334/266535

This issue can be reproduced by adding `loading="lazy"` to any `<img>` and watching it load, preferable a large and slowly loaded image.

<!DOCTYPE html>
<html>
  <head>
    <title>Lazy Loading</title>
  </head>
  <body style="background:black">
    <img 
      alt="This is alt text"
      loading="lazy"
      width="791"
      height="989"
      src="https://images.unsplash.com/photo-1496694971191-58e2450fc841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"
   />
  </body>
</html>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220805/2c807ab7/attachment.htm>