creativetimofficial/material-dashboard

[Bug] CSS style problem in Safari 15.1 (macOS)

shivanraptor opened this issue · 5 comments

shivanraptor commented

Version

v3.0.0 (according to the page source of demo dashboard page)

Reproduction link

https://demos.creative-tim.com/material-dashboard/pages/dashboard.html

Operating System

macOS 10.15.7

Device

iMac 21" (late 2013 model)

Browser & Version

Safari 15.1

Steps to reproduce

  1. Open the Creative Tim's Material Dashboard demo link (https://demos.creative-tim.com/material-dashboard/pages/dashboard.html)
  2. Notice the lower-left corner "Upgrade to Pro" button. In Safari, it is a grey rectangle (in other browsers like Chrome, it's a pink button)
  3. The style of Drop Down box (<select class="form-control">) is also different. In Safari, the down arrow is missing.

What is expected?

Expected that the visual styles of the Material Dashboard are identical across different browsers.

What is actually happening?

Safari does not show the correct styles.

Solution

As a workaround, set the following CSS:

.btn-primary, .btn.bg-gradient-primary {
    -webkit-appearance: none;
}

Additional comments

Screenshots: https://imgur.com/a/ut6vT5s

shivanraptor commented

Screenshot 2021-11-30 at 3 55 54 PM

Screenshot of Safari 15.1

groovemen commented

Hello @shivanraptor,

Thank you for using our products and for your solution on fixing this bug. We will check your PR and merge it if everything is good.
Please let us know if we can help you with anything else.

All the best,
Stefan

groovemen commented

Hello again,

We reviewed your PR and it looks like your fix is just for the sidebar button example.
So, we will fix this issue into the next product update. Again, thank you for pointing us to it.
Regards,
Stefan

shivanraptor commented
shivanraptor commented

@groovemen for the drop-down box <select class="form-control"> tag (no other CSS classes are added), the case is more complicated. In Safari, there is no drop-down box arrow displayed. In other browsers, the arrow is not displayed as well unless I set it to -webkit-appearance: auto;, which the value auto is not supported by Safari and fallback to none.

If I commented out -webkit-appearance: none; in the .form-control (in _form_control.scss:5), the look of the drop-down box will change completely (as it is computed as -webkit-appearance: menulist-button;), but at least it looks like a drop-down box instead of just a text. Please take a look at this display issue as well.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

  • ❤️1
  • 🚀1