Bug 156744 - text-shadow inside background-size cover shows extra shadow artifact
Summary: text-shadow inside background-size cover shows extra shadow artifact
Status: RESOLVED CONFIGURATION CHANGED
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: 2022-07-14 15:40 PDT (History)
4 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
View All Add an attachment (proposed patch, testcase, etc.)

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.
Comment 3 Brent Fulgham 2022-07-14 15:40:52 PDT 
This does not happen in Safari 15.5+.