Strange Stretch Marks when border radius is adjusted

Hi guys,

I’ve discovered strange issue, when you set border radius as follow:

Top left and Top Right to 3px and bottom to 0, and apply some gentle box shadow, on top of the columns, it creates strange Stretch Marks. This issue won’t be visible if border radius is equal to all corners.

Example below.

Any ideas?

Looks like only visible in Safari, latest version macOS Catalina / Safari Version 13.0.3
Latest WP / PRO / new GRID layout

Hello ForgetWP,

Thanks for writing in! Where did you applied the border radius? To the Grid or to a particular column? We cannot seem to replicate the issue. Please give further details.

Regards.

Hi,
Border radius has been applied in a Cell

Hey @rafalkukla,

I don’t see the stretch marks upon checking in Chrome and Firefox both on Windows and macOS (Catalina). What browser are you seeing this issue? Before you answer that, please check if you have browser extensions and deactivate all of them if applicable. Also, try clearing the browser’s cache.

Thanks.

Hi There,

Yes, as I said, its seems only be affected by Safari, in Catalina. I checked in Chrome and looks clean, but in Catalina / Safari looks stretched.

Let me check my extensions, but I don’t normally have any.

Cache cleared, of course.

Hi @rafalkukla,

Based on your screenshot, it could be a rendering glitch with Safari on Catalina MacOS. And since it’s a glitch, there is a chance it can’t be fixed by just CSS or script since it’s specific to the rendering of that specific version. Though, I’ll continue checking and find Catalina MacOS to test with and will let you know.

Thanks!

Hey @rafalkukla,

I just want to chime in here as I could test in macOS Catalina and Safari 13. But before anything else, I’d like to apologize for the confusion earlier. I thought it was the other way around or issue is not happening in Safari.

Anyway, I checked in macOS Catalina and Safari 13 and I don’t see the marks like in your screenshot. I checked your home page because the page you’ve posted previously is now none existent.

What you’re seeing could be a feature of a browser extension or something unique to your computer.

Thanks.

Hi, sorry for the delay. Please review the page I’ve submitted again. I took it off as site was going live.
I reviewed my extensions and I’ve got only 1, 1password which make no difference.

After inspecting the element in Safari, if I disable border-radius, the those marks clearly disappearing.

No issues on iPad, or iPhone. Hmm can’t believe I’m the only one.

Hey @rafalkukla,

I see the issue now in macOS Catalina and Safari 13. This looks like a bug with Safari 13. I tested Safari 12 and the marker doesn’t show up. I’ll post this in our issue tracker anyway maybe our development team could shed some light once they read this.

Thanks

1 Like

Great, glad I’m not the only one :slight_smile:

Thanks for reporting.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.