The lovely border image vanished mysteriously from Safari on both OS and iOS

My border image is no longer appearing in Safari on OS and iOS. I am using Safari 10 on my Mac and the latest version of iOS on my iPad and iPhone. However, it still displays correctly in Firefox.

You can view the website URL here: 

 #sidebar .inner{
border: 1px solid #8e8cae; 
-moz-border-image:url(images/border.png) 50 50 repeat; /* Old firefox */
-webkit-border-image:url(images/border.png) 50 50 repeat; /* Safari */
-o-border-image:url(images/border.png) 50 50 repeat; /* Opera */
border-image:url(images/border.png) 50 50 repeat;

}

I have checked to ensure that all declarations are correct, but the issue persists. Any assistance would be greatly appreciated.

ioscsssafariborder-image

Answer №1

I recently came across a solution for the same issue at this link. According to the post:

"I found a fix and thought of sharing it with others who might encounter the same problem. By replacing the border shorthand property with border-style and border-width, the issue was resolved."

Here is an example: 

.borderWrap{

border-style: solid;
border-width: 34px;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

Instead of:

.borderWrap{

border: solid 34px transparent;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

Answer №2

Ensure that the border width matches the border-image:

border: 50px solid transparent;

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

Encountering a certificate pinning problem following the integration of Fabric Crashlytics

Utilizing Fabric Crashlytics in both my Android and iOS applications has been successful as I followed the integration instructions provided. All data, including crash reports, are being displayed accurately on the dashboard. During a recent penetration t ...

androidioscrashlyticsgoogle-fabric

Embedding text within an image and adjusting its size simultaneously

My goal is to include a paragraph within an image, but the text keeps overflowing beyond the boundaries. I would like the image to resize proportionally to accommodate the length of the paragraph. Despite attempting to use the min-height property, I have ...

htmlcss

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...

javascripthtmljquerycss

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

htmlcss

Guide on extracting XML information from a website and presenting it in a UITableView

I've got a good handle on generating and utilizing JSON data in UITableView, as demonstrated by this sample JSON data link However, for my latest project, the client has provided XML data instead. The sample data can be found here: I'm eager to ...

iosobjective-cxmljsonxml-parsing

What is the best way to ensure the snackbar occupies the full width on smaller screens?

After reviewing this commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2 In the latest update, the snackbar no longer expands to 100% width on mobile screens. Can someone p ...

cssreactjsmaterial-uisnackbar

Ways to update the hamburger menu icon after it has been clicked

I am trying to create a hamburger style menu where the icon changes to a cross when clicked. How can I achieve this effect using JavaScript? Here is the HTML structure: <ul class="navigation"> <li class="nav-item"><a href="#">Home&l ...

javascripthtmlcsshamburger-menu

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

javascriptjqueryhtmlcss

Gaining a comprehensive understanding of media queries

Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...

htmlcssmedia-queries

What sets justify-content apart from align-items?

I'm really struggling to grasp the distinction between these two properties. After conducting some research, it appears that justify-content can handle... space-between and space-around, while align-items is capable of... stretch, baseline, initial, a ...

cssflexbox

Laravel - Unauthorized access to array index

I am trying to change the color of a table cell in Laravel based on its content, but I keep encountering this error: "Illegal string offset 'Disponible' (View: C:\Users\RAYLAN\Documents\CRMSAV\resources\vie ...

phpcsslaravelhtml-tablecell

What is the best way to apply padding to the left and right of ::webkit-scrollbar-thumb?

Is there a method to mimic the unique scrollbar design used on YouTube? Desired appearance: https://i.sstatic.net/iSoTd.png It appears that utilizing ::webkit-scrollbar-thumb with left and right padding can help achieve this look. I have experimented w ...

htmlcsssassscrollbar

Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo: https://i.sstatic.net/1tqKM.jpg I ...

htmlcsspdfhtml2pdfhtml-to-pdf

What is the process for delivering notifications from different devices to a specific app on iOS?

I am currently developing a feature that involves monitoring notifications from a server and performing certain actions. However, I have noticed that the notifications do not always come through immediately after making changes on the server. Is there a ...

iospush-notification

Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...

javascriptjqueryhtmlcsschart.js

Issue with organizing columns in Plotly-Dash using personalized CSS

I expected the code below to create three adjacent drop-down menus under a tab labeled Setup, but I'm actually seeing them stacked on top of each other. What mistake am I making? Any guidance would be highly appreciated! I've provided the releva ...

pythoncssplotly-dash

Firefox presents a compact box positioned between the images

When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...

csshtml

Having trouble getting SCSS styles to render properly in your vue.js project?

I am currently developing a vue.js web application and I want to utilize SCSS for styling purposes. I have installed npm i node-sass sass-loader and have created a vue.config.js at the root level. Here is what I have set up in the configuration file: modul ...

cssvue.jssass

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

javascripthtmlcssscrollbar

Comparison between an empty div and a div containing text with the inline-block property applied

Curious about why this phenomenon is occurring. CSS div { display: inline-block; margin-right: 2px; width: 20px; background-color: red; } Empty div <div style="height:20px;"></div> <div style="height:40px;"></div> &l ...

htmlcss