Bulma: Safari 13 - Crash when using form select

[tbaddade]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 0.7.5 -->
My browser is: Safari 13.0 or Safari Technology Preview Release 91 (Safari 13.1)

Description

Both Safari versions crash when I use the Form select drop-down list.

Steps to Reproduce

It occurs on this page
https://bulma.io/documentation/form/select/

Expected behavior

No Browser crash ;)

Actual behavior

Browser crash

[tbaddade]

Same problem when I compile all the sass files.
If I load all _all.sass files separately, but without form/_all.sass, everything is fine.

It's fine when I load all the Sass files and remove the span.select tag.

[tbaddade]

My solution is

.select select {
    text-rendering: auto !important;
}

[jgthms]

Some issues tend to happen with preview releases. Will re-investigate when Safari 13 is released.

[tbaddade]

Some issues tend to happen with preview releases. Will re-investigate when Safari 13 is released.

Better formatted

My browser is:
Safari 13.0 or
Safari Technology Preview Release 91 (Safari 13.1)

[grantbdev]

Safari 13 is released and the issue is still present. We are using $body-rendering: auto override variable as a workaround for now.

optimizeLegibility appears to be not working well in Safari 13: https://stackoverflow.com/questions/58013535/safari-13-beta-on-mac-os-hanging-when-i-click-on-a-dropdown

[jgthms]

I've just updated to Safari 13 and could reproduce the bug. The fix is adding text-rendering: auto to .select.

[jprado]

Posting this for google, and hoping someone who works on Safari sees this. Here's a page with a reproducible crash: https://jsfiddle.net/4ydkLh1u/3/

The error can be intermittent with other CSS combinations. So this one happens all the time for me.

[matthewwithanm]

I just opened a bug on WebKit.

[rmcveigh]

I ran into this issue as well. Using .select select { text-rendering: auto !important; } resolves it.

[cicobuff]

Hi,

I have this issue as well. May I know where do I apply the fix:
.select select { text-rendering: auto !important; }

mentioned? Do I need to recompile bulma?

[rmcveigh]

Hi,

I have this issue as well. May I know where do I apply the fix:
.select select { text-rendering: auto !important; }

mentioned? Do I need to recompile bulma?

I was able to apply the fix by placing the .select select { text-rendering: auto !important; } rule to the global scope. Once in place, you'll need to compile you SCSS/LESS/Sass/etc

[buildscientist]

Also ran into this issue using Bulma with VueJS. For those of you using VueJS - override the existing CSS by adding a scoped style as such into the component(s) using the form select.

<style scoped>
.select select {
  text-rendering: auto !important;
}
</style>

[cicobuff]

Thanks.

I am using React. So I went ahead and changed the inline style to include the text-rendering.

[garrettw]

@matthewwithanm your webkit bug can be closed as a dupe of https://bugs.webkit.org/show_bug.cgi?id=202198
even though I know you reported it first, it was the other one that got fixed

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.