Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS:

body { background: white; }

h1 { 
    color: black;
    text-shadow: 100px 100px 10px black;
}

https://i.sstatic.net/j8OTS.png When viewing in Safari browser, the shadow appears to be clipped or not fully rendered beyond the edge of the element border.

Interestingly, when I trigger a background color animation effect on the body (such as transitioning from white to black), the shadow seems to render properly beyond the element border during the transition. But once the transition is complete, the shadow is cut off at the border again.

Answer №1

To ensure visibility during transformation, try adding -webkit-transform: translateZ(0); to your element. Make sure the element cutting it doesn't have overflow:hidden. Also, consider if the element causing the shadow cut is 3d-transformed, as it may be acting as the viewport for all children. If these solutions don't work, please provide a Minimal, Complete, and Verifiable example for further assistance. Reproduce the bug here. – Andrei Gheorghiu Apr 19 '17 at 13:13 1

Solution

-webkit-transform: translateZ(0); with explicit display: block; inline (placing it in the .css file didn't work for me) resolved the issue. Thank you for the suggestion! Apologies for not including more code examples, the post was getting lengthy. Safari can be quite the jungle of a browser at times... – Starcat Apr 20 '17 at 0:03

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Footer that is adhered to the bottom of the page with a

Can a sticky footer with a transparent background be achieved without a content background (.wrapper) underneath it? I found this resource: ...

Strange occurrence of blank space problem. The enigma within HTML, CSS, and Angular

I am encountering a puzzling issue with the code below: After saving text input from a textarea to a SQL database without any leading or trailing white spaces present, I notice that when displaying the text within a div using angular {{ model.text }}, str ...

Enhancing the appearance of the content editor with a personalized touch

I am working with a standard content editor that utilizes an iFrame as the text area. Upon changing dropdown options, it triggers the following command: idContent.document.execCommand(cmd,"",opt); Where "idContent" refers to the iFrame. One of the dropd ...

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

Is it possible to maintain tab focus instead of visual focus when navigating past the skip navigation menu for improved accessibility?

My website features an accessibility skip navigation menu that utilizes named anchors to navigate to different content areas. These content areas, including the top menu, left menu, main body content, and footer menus, contain links within them. When I u ...

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

Mysterious area located within a flexbox set to display items in a column arrangement

There is a mysterious gap within a flexbox that has a column direction. In the header-left div, I have set up a flexbox with a column direction. It consists of three nested divs: left_text_heading, hero-img, and hero-text. Strangely, there is an unknown s ...

Can a Div Maintain White Space No Wrap and Stretch to the Full Width of its Parent Element?

Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic wid ...

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

The background video on the website is having trouble resizing properly to fit the screen dimensions

I'm new to coding and I'm attempting to incorporate a background video on the homepage. The issue arises when I resize my window or view it on a mobile device, as the video fails to adjust to the window size, causing side scrolling that reveals t ...

Steps for creating a Pure CSS Scroll-to-Top button

Looking to create a Pure CSS Scroll to top, I attempted it but struggled with making it clickable like in JavaScript. Here is the CSS code I tried: body { height: 99999999999999999999999999999999999px; position: relative; } button { color: white; ...

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

Is it possible to extend the height of a floating child to match that of the parent element

Can CSS alone make this possible? The answer seems to elude me no matter where I look! I'm trying to create a left and right nav bar that extends to 100% height, essentially reaching the end of the page. There are three floated columns inside a float ...

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

The dropdown function in Bootstrap seems to be malfunctioning

I have implemented a basic dropdown menu using the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ...

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

Utilize Flexbox's column direction to ensure that all flex items within the same column have uniform height

Having trouble creating a responsive web page. Here are the specifics: Sharing my HTML and CSS code below: - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

Modify the variable to encompass a multitude of hues - scss

Hello, I am looking to modify the background of a page for dark mode. This is the current background styling: $orangeLight:#FFA500!default; $redLight:#FA8072!default; $blueLight:#B0C4DE!default; $greenLight:#90EE90!default; $list2: $blueLight 0%,$blueLi ...