Bug 156744 - text-shadow inside background-size cover shows extra shadow artifact
Summary: text-shadow inside background-size cover shows extra shadow artifact
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 9.3
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-04-19 06:52 PDT by Mike Griffith
Modified: 2016-04-21 20:32 PDT (History)
3 users (show)

See Also:


Attachments
Screenshot showing extra shadow artifact (137.91 KB, image/png)
2016-04-19 06:52 PDT, Mike Griffith
no flags Details
Test reduction (133.73 KB, text/html)
2016-04-21 20:28 PDT, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Griffith 2016-04-19 06:52:33 PDT
Created attachment 276723 [details]
Screenshot showing extra shadow artifact

The following CSS rules cause an additional shadow to be applied around a box that is not accounted for by any of the elements.

  <div style="padding:100px 0;
              background-image:url(//cdn2.hubspot.net/hubfs/484866/Headers/BoxCast_Fun_1-01.jpg?t=1461010690724);
              background-size:cover;">
    
    <h1 style="font-weight:100;
               color:#fff;
               font-size:60px;
               text-shadow:0 0 10px rgba(0,0,0,0.5);">Meet the Team</h1>
  </div>

Runnable example: https://output.jsbin.com/govopuzape

NOTE: I cannot reproduce this inside the iOS simulator; it only appears on a physical device (iPhone 6 / iOS 9.3).
Comment 1 zalan 2016-04-21 20:28:10 PDT
Created attachment 277001 [details]
Test reduction
Comment 2 zalan 2016-04-21 20:32:21 PDT
When either the text (size position) or the text-shadow change, the artifact changes too. Also it can be clipped out with overflow hidden.