@media Print text-shadow under Chrome
The solution is -webkit-filter: drop-shadow(4px 4px 1px #ccc).
Here is the example:
@media print {
/* CSS only for Chrome */
@media print and (-webkit-min-device-pixel-ratio:0) {
.item { -webkit-filter: drop-shadow(4px 4px 1px #ccc); }
}
}
And if you need multiple text-shadows use it:
.item {
-webkit-filter: drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff);
}
Here is the final CSS:
@media print {
.item {
-webkit-filter: drop-shadow(4px 4px 1px #ccc);
text-shadow: 4px 4px 1px #ccc;
}
}
Different behavior of box-shadow in Chrome and Firefox
Isn't box-decoration-break:clone what you are after?
p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -10px 0px 0px red; box-decoration-break: clone;}<!DOCTYPE html><html>
<head></head>
<body>
<p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>
</body>
</html>Chrome issue with text-shadow color on transformed paragraphs
To answer my own question in hopes that it saves someone else time, after some tinkering it seems that adding a blur, either positive or negative, to the text shadow fixed this issue. Replacing
text-shadow: 10px 10px #000000;
with
text-shadow: 10px 10px -1px #000000;
displays the text shadow at the appropriate color.
Chrome doesn't display text-shadow with a spread value
Yea, I just updated to 12.0.742.0 and noticed the shadow disappeared from my website. I'm not going to worry about it unless it stays gone in future Chrome releases.
Related Topics
CSS Mask Not Working on Chrome (Webkit)
Webfont Does Not Apear Without Www
CSS Change Border Color on Hover
How to Properly Handle Navbar Color Change on Scroll in Angular
Input Doesn't Respect Flex Container Width
CSS Div Center Multi-Line Text Vertically and Horizontally with a Background Image
Display: Table-Cell Problems in Chrome
My Less Math Operations Aren't Working in My Media Query Definitions
Single-Line Vs Multi-Line CSS Formatting
Sass 3.3.7 - Dynamically Create List of Icons
Susy 2.0 Change Columns at Breakpoint
CSS - Background Images Not Displaying Properly on Mobile Browsers
No CSS Transition for 'Height: Fit-Content'
Using HTML Attributes as CSS Property Values
Repeat Dots in Less/Sass for Content Property