i am giving background color and border color with border radius to mui table head and mui table row.
it looks fine in windows and android all browsers but seems like position not working in mac and iphone system.

i am giving background color and border color with border radius to mui table head and mui table row.
it looks fine in windows and android all browsers but seems like position not working in mac and iphone system.
i am adding windows chrome view and safari browser view.
i setup the code on code sandbox so you can see issue by opening link in windows chrome and safari mac os.
for debugging purpose i apply same css on mui box and it was working fine in safari also. seems like issue with using Pseudo-elements positions.
i want this with Pseudo-elements method. i ll be very thankful to you if you resolve this issue.
this is how it looks in windows chrome
his is the safari viewa
background color and border is targetting table tag instead of staying inside thier parent relative.
here is code sandbox link
https://codesandbox.io/p/sandbox/silent-dream-txtxrl?file=%2Fsrc%2FDemo.tsx