safari border bug

• Password Generator
• HTML Editor
• HTML Encoder
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face
• Color Picker
• Colors CMYK
• Color mixer
• Color Converter
• Color Contrast Analyzer
• Color Gradient
• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

How to Fix CSS Issues on Safari

Different browsers serve the web page content differently which can cause problems while using some CSS properties. To solve this kind of issues, there is a simple solution that will help you with 90 percent of cases.

Although many programmers face some difficulties when Safari doesn’t support CSS properties, these properties work fine in other browsers.

Displaying properties in Safari

There is a CSS appearance property used to display an element using a platform-native styling based on the users' operating system's theme. To make it work on Safari, we must set the appearance property to its "none" value. Also, use -WebKit- and -Moz- vendor prefixes.

Let’s see an example, where we use this trick to make the border-radius property work on Safari without any problem.

Example of making the border-radius property work on Safari:

The background-color property may also have the cause problem on Safari. Let’s see one more example.

Example of making the background-color property work on Safari:

Related resources.

• CSS appearance Property
• HTML Basics
• Javascript Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Vue.js Basics
• Python Basics
• Java Basics
• NodeJS Basics

Instantly share code, notes, and snippets.

domske / safari-fix-overflow-border-radius.md

• Download ZIP
• Star ( 32 ) 32 You must be signed in to star a gist
• Fork ( 2 ) 2 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save domske/b66047671c780a238b51c51ffde8d3a0 to your computer and use it in GitHub Desktop.

There is a bug in Safari when using border-radius and overflow: hidden . Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.

There are some workaround. We need to place the element with the overflow attribute into a stacking context. I've tested the following workarounds on the latest version of iOS (14.4). You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs )

Use this on the element with overflow: hidden and border-radius :

Let me know if this fixed your problem or not. Personally, I use transform or z-index . These are probably the most harmless properties. But feel free to post your opinion and other great solutions.

tklkalok commented Jul 14, 2022

Nice and Detail workaround, appreciate your effort and hope Apple would some how fix it in the future.

Sorry, something went wrong.

hirenpanchal1608 commented Jul 26, 2022

Nice solution! transform: translateZ(0); works for me

JoiGud commented Nov 29, 2022

Nice workaround. The translateZ worked for me!

mosuzi commented Dec 5, 2022

Unfortunately, neither those above worked for me :(

fdambrosio commented Dec 6, 2022

good, it works to fix on ios 16 !

jowc commented Jan 22, 2023

Thanks. The z-index worked for me. :)

cesswhite commented Feb 11, 2023

Thank you, two solutions work for me in CSS: 1.- mask-image: radial-gradient(white, black); 2.- will-change: transform;

In UnoCSS/TailwindCSS this class work for me: will-change-transform

alexhartan commented Feb 21, 2023

You are the man! This fix just solved a bunch of headaches for me

SebHex commented Apr 2, 2023

Using the Tailwind CSS class transform-gpu worked for me

This is similar to using the following CSS:

dsajlovic commented Apr 11, 2023

April 2023 still with the same problem, ONLY in Safari -.- Thank you for posting workaround :)

minhoyooDEV commented Apr 12, 2023

Frederick-88 commented Apr 13, 2023

transform: translateZ(0); works for me in 2023 - thanks a lot!

btlm commented Apr 20, 2023

z-index: 0; works as charm

kaiwen-wang commented May 15, 2023 • edited Loading

confirming tailwind will-change-transform works

VolodymyrShtef commented May 15, 2023

Thanks, z-index did the job

alexfranco90 commented Jun 1, 2023

Thanks, both z-index: 0; and transform: translateZ(0); works for me. In my case will-change: transform works too but i was trying to find an alternative.

MartinMalinda commented Sep 3, 2023

hieuthien commented Sep 5, 2023

Thanks you, all thing works with my CSS =]]

wojciak commented Nov 20, 2023

NeroTesalo commented Mar 13, 2024

I love you for this! Solution 2: transform: translateZ(0) save my life free from this awful bug

sohammondal commented Apr 27, 2024

Awesome!! transform: translateZ(0); works for me. ❤️

PinkiNice commented May 15, 2024

seamlink-aalves commented Jun 26, 2024

transform: translateZ(0); did it for me. Thanks

• | New Account
• | Log In Remember [x]
• | Forgot Password Login: [x]
• Format For Printing
•  -  XML
•  -  Clone This Bug
•  -  Top of page

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

Safari public beta and borders

This page demonstrates a slight CSS rendering bug in Apple's new Safari browser, based on a similar test page by Sylvan Korvus . The page renders correctly in Mac IE 5.2 and Mozilla.

The bug is that zero-width dotted or dashed borders show up as 1px dashed borders if any other side of the box has positive-sized borders . Zero-width borders of other styles are not affected. The workaround is to ensure that one is not defining zero-widths as a substitute for defining border-style:none .

Note also that the dotted borders appear dashed: dots should be square or round, not elongated. This is the same glitch as Windows IE.

Different border styles

Different style syntax.

Acknowledgements: This test page is an expanded version of one by Sylvan Korvus.

ios16 safari black border bug

By lzy100p January 7, 2023 in GSAP

Recommended Posts

Using safari to access the page, the elements on the page will appear black border

Reproduction method. 1.Visit the test url and wait for it to finish loading 2. Exit safari and run a large application such as a game 3. Quit the game and reopen safari, random elements on the page will appear black border

Not every time it appears, you need to try more times This problem did not exist before, seems to be after ios16 will have (not sure) My phone model is iphone 13

Does anyone know what is going on? Thank you

https://h5.legions.tech/flight/test.html

Link to comment

Share on other sites.

It should be related to translate3d (force3D) Does this property not work on ios anymore?

I'm pretty confident this has absolutely nothing to do with GSAP. Safari is just a very buggy browser when it comes to graphics rendering. Here are some things you can try: 

• Set will-change: transform on the affected elements (in the CSS)
• Maybe set gsap.config({force3D: false}) (but that really shouldn't be necessary)

 Yes, this should be a bug in Safari

This problem only seems to occur with elements created by document.createElement

will-change and force3D: false These two methods have been tried and still have black border

It seems like this should be a big bug, but I searched the Internet and did not find a similar problem

Do you have any other suggestions? Be able to solve this problem

Yeah, browsers update their rendering algorithms sometimes and don't really tell anyone. It's really annoying, I know. 

Other ideas: 

• Try giving them a very slight rotation so that they're not perfectly aligned with the pixel grid.
• Change the way you're scaling so that the native image size is larger and you never have to scale above 1. So for example, if you're scaling from 1 to 1.1 right now, make your native image scaled 1.1, and then start with it at like 0.9 and scale to 1. That way, the browser doesn't have to stretch pixels larger than the native size. 
• 1 year later...

Do you have any new ideas or workarounds for this issue? I am also experiencing it. In my case, the SVG renders correctly when I first visit the page. However, I notice that the ugly black borders appears when I minimize Safari for a few seconds and then maximize it again.

GSAP Helper

Without a  minimal demo , it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

Please don't include your whole project.  Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

See the Pen aYYOdN by GreenSock ( @GreenSock ) on CodePen

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package  for using any of the bonus plugins: 

• React  ( please read this article !)

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.  ✅

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Already have an account? Sign in here.

Recently Browsing    0 members

• No registered users viewing this page.
• Existing user? Sign In
• Leaderboard
• Create New...

You can make a difference in the Apple Support Community!

When you  sign up with your Apple ID , you can provide valuable feedback to other community members by  upvoting helpful replies and User Tips .

Safari Mobile Zoom Bug

If i zoom in a website and switch apps, when i come back to safari and try to zoom out of the page, all tabs page opens up because of the gesture. This didn't happen before.

Also if i click a screenshot on a zoomed in page, then delete the screenshot, when i come back to the webpage and try to zoom out, the same thing happens, all tabs open.

ps: when u switch back to safari for the first issue, don’t move around the website and just try to zoom out, the issue i am addressing should occur.

Posted on Sep 17, 2024 7:00 AM

Loading page content

Page content loaded

There are no replies.